From 6418e97fc813e515bc69cb3ffde4e04c0fe85b9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Sun, 19 Jan 2020 20:44:36 +0800 Subject: [PATCH] docs(ActionSheet): update demo and documents --- src/action-sheet/README.md | 131 +++++++++-------- src/action-sheet/README.zh-CN.md | 103 ++++++++------ src/action-sheet/demo/index.vue | 132 +++++++++--------- .../test/__snapshots__/demo.spec.js.snap | 50 ++++--- 4 files changed, 219 insertions(+), 197 deletions(-) diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index 18b98925a..b3cc6d55f 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -42,28 +42,7 @@ export default { }; ``` -### Status - -```html - -``` - -```js -export default { - data() { - return { - show: false, - actions: [ - { name: 'Option', color: '#07c160' }, - { loading: true }, - { name: 'Disabled Option', disabled: true } - ] - }; - } -}; -``` - -### ActionSheet with cancel button +### Show Cancel Button ```html ``` -### ActionSheet with title +### Option Status + +```html + +``` + +```js +export default { + data() { + return { + show: false, + actions: [ + { name: 'Option', color: '#07c160' }, + { loading: true }, + { name: 'Disabled Option', disabled: true } + ] + }; + } +}; +``` + +### Custom Panel ```html -

Content

+
Content
 + + ``` ## API ### Props -| Attribute | Description | Type | Default | -| ---------------------- | --------------------------------------------- | ------------------------- | ------- | -| actions | Options | _Action[]_ | `[]` | -| title | Title | _string_ | - | -| cancel-text | Text of cancel button | _string_ | - | -| description `v2.2.8` | Description above the options | _string_ | - | -| overlay | Whether to show overlay | _boolean_ | `true` | -| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` | -| close-icon `v2.2.13` | Close icon name | _string_ | `cross` | -| close-on-click-action | Whether to close when click action | _boolean_ | `false` | -| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` | -| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` | -| lock-scroll | Whether to lock background scroll | _boolean_ | `true` | -| duration `v2.0.3` | Transition duration, unit second | _number_ | `0.3` | -| get-container | Return the mount node for action-sheet | _string \| () => Element_ | - | -| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | - -### Events - -| Event | Description | Arguments | -| ------------- | --------------------------------- | ----------- | -| select | Triggered when click option | item, index | -| cancel | Triggered when cancel click | - | -| click-overlay | Triggered when click overlay | - | -| open | Triggered when open ActionSheet | - | -| opened | Triggered when opened ActionSheet | - | -| close | Triggered when close ActionSheet | - | -| closed | Triggered when closed ActionSheet | - | +| Attribute | Description | Type | Default | +|------|------|------|------| +| actions | Options | _Action[]_ | `[]` | +| title | Title | _string_ | - | +| cancel-text | Text of cancel button | _string_ | - | +| description `v2.2.8` | Description above the options | _string_ | - | +| close-icon `v2.2.13` | Close icon name | _string_ | `cross` | +| duration `v2.0.3` | Transition duration, unit second | _number_ | `0.3` | +| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` | +| overlay | Whether to show overlay | _boolean_ | `true` | +| lock-scroll | Whether to lock background scroll | _boolean_ | `true` | +| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` | +| close-on-click-action | Whether to close when click action | _boolean_ | `false` | +| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` | +| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | +| get-container | Return the mount node for action-sheet | _string \| () => Element_ | - | ### Data Structure of Action -| Key | Description | Type | -| --------- | ---------------------------- | --------- | -| name | Title | _string_ | -| subname | Subtitle | _string_ | -| color | Text color | _string_ | -| className | className for the option | _any_ | -| loading | Whether to be loading status | _boolean_ | -| disabled | Whether to be disabled | _boolean_ | +| Key | Description | Type | +|------|------|------| +| name | Title | _string_ | +| subname | Subtitle | _string_ | +| color | Text color | _string_ | +| className | className for the option | _any_ | +| loading | Whether to be loading status | _boolean_ | +| disabled | Whether to be disabled | _boolean_ | + +### Events + +| Event | Description | Arguments | +|------|------|------| +| select | Triggered when click option | item, index | +| cancel | Triggered when cancel click | - | +| click-overlay | Triggered when click overlay | - | +| open | Triggered when open ActionSheet | - | +| opened | Triggered when opened ActionSheet | - | +| close | Triggered when close ActionSheet | - | +| closed | Triggered when closed ActionSheet | - | diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index 8553200cb..e0bdf6f1d 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -35,8 +35,8 @@ export default { }, methods: { onSelect(item) { - // 默认情况下，点击选项时不会自动关闭菜单 - // 可以通过 close-on-click-action 属性开启自动关闭 + // 默认情况下点击选项时不会自动收起 + // 可以通过 close-on-click-action 属性开启自动收起 this.show = false; Toast(item.name); } @@ -44,29 +44,6 @@ export default { } ``` -### 选项状态 - -选项可以设置为加载状态或禁用状态，也可以通过`color`设置选项颜色 - -```html - -``` - -```js -export default { - data() { - return { - show: false, - actions: [ - { name: '选项', color: '#07c160' }, - { loading: true }, - { name: '禁用选项', disabled: true } - ] - }; - } -} -``` - ### 展示取消按钮 设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前菜单 @@ -110,14 +87,48 @@ export default { /> ``` -### 展示标题栏 +### 选项状态 -通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容 +可以将选项设置为加载状态或禁用状态，或者通过`color`设置选项颜色 + +```html + +``` + +```js +export default { + data() { + return { + show: false, + actions: [ + { name: '选项', color: '#07c160' }, + { loading: true }, + { name: '禁用选项', disabled: true } + ] + }; + } +} +``` + +### 自定义面板 + +通过插槽可以自定义菜单的展示内容，同时可以使用`title`属性展示标题栏 ```html -

内容

+
内容
 + + ``` ## API @@ -130,28 +141,16 @@ export default { | title | 顶部标题 | *string* | - | | cancel-text | 取消按钮文字 | *string* | - | | description `v2.2.8` | 选项上方的描述信息 | *string* | - | -| overlay | 是否显示遮罩层 | *boolean* | `true` | +| close-icon `v2.2.13` | 关闭图标名称或图片链接，可选值见 [Icon 组件](#/zh-CN/icon) | *string* | `cross` | +| duration `v2.0.3` | 动画时长，单位秒 | *number* | `0.3` | | round `v2.0.9` | 是否显示圆角 | *boolean* | `true` | -| close-icon `v2.2.13` | 关闭图标名称或图片链接 | *string* | `cross` | +| overlay | 是否显示遮罩层 | *boolean* | `true` | +| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | +| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | | close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | -| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | -| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | -| duration `v2.0.3` | 动画时长，单位秒 | *number* | `0.3` | -| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - -### Events - -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 | -| cancel | 取消按钮点击时触发 | - | -| click-overlay | 点击遮罩层时触发 | - | -| open | 打开菜单时触发 | - | -| opened | 打开菜单且动画结束后触发 | - | -| close | 关闭菜单时触发 | - | -| closed | 关闭菜单且动画结束后触发 | - | +| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | ### Action 数据结构 @@ -166,6 +165,18 @@ export default { | loading | 是否为加载状态 | *boolean* | | disabled | 是否为禁用状态 | *boolean* | +### Events + +| 事件名 | 说明 | 回调参数 | +|------|------|------| +| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 | +| cancel | 取消按钮点击时触发 | - | +| click-overlay | 点击遮罩层时触发 | - | +| open | 打开菜单时触发 | - | +| opened | 打开菜单且动画结束后触发 | - | +| close | 关闭菜单时触发 | - | +| closed | 关闭菜单且动画结束后触发 | - | + ## 常见问题 ### 引入时提示 dependencies not found？ diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue index 1b3ac980c..c48ec118f 100644 --- a/src/action-sheet/demo/index.vue +++ b/src/action-sheet/demo/index.vue @@ -1,60 +1,58 @@ @@ -64,34 +62,36 @@ import { GREEN } from '../../utils/constant'; export default { i18n: { 'zh-CN': { - buttonText: '弹出菜单', - status: '选项状态', subname: '副文本', - disabledOption: '禁用选项', - showTitle: '展示标题栏', showCancel: '展示取消按钮', - showDescription: '展示描述信息', + buttonText: '弹出菜单', + customPanel: '自定义面板', description: '这是一段描述信息', + optionStatus: '选项状态', + disabledOption: '禁用选项', + showDescription: '展示描述信息', }, 'en-US': { - buttonText: 'Show ActionSheet', - status: 'Status', subname: 'Subname', - disabledOption: 'Disabled Option', - showTitle: 'ActionSheet with title', - showCancel: 'ActionSheet with cancel button', - showDescription: 'ActionSheet with description', + showCancel: 'Show Cancel Button', + buttonText: 'Show ActionSheet', + customPanel: 'Custom Panel', description: 'Description', + optionStatus: 'Option Status', + disabledOption: 'Disabled Option', + showDescription: 'Show Description', }, }, data() { return { - show1: false, - show2: false, - show3: false, - show4: false, - show5: false, + show: { + basic: false, + cancel: false, + title: false, + status: false, + description: false, + }, }; }, @@ -115,7 +115,7 @@ export default { methods: { onSelect(item) { - this.show1 = false; + this.show.basic = false; this.$toast(item.name); }, @@ -130,13 +130,7 @@ export default { @import '../../style/var'; .demo-action-sheet { - background-color: @white; - - .van-button { - margin-left: @padding-md; - } - - p { + &-content { padding: @padding-md @padding-md @padding-md * 10; } } diff --git a/src/action-sheet/test/__snapshots__/demo.spec.js.snap b/src/action-sheet/test/__snapshots__/demo.spec.js.snap index 22427b83d..0b0f77f33 100644 --- a/src/action-sheet/test/__snapshots__/demo.spec.js.snap +++ b/src/action-sheet/test/__snapshots__/demo.spec.js.snap @@ -2,30 +2,36 @@ exports[`renders demo correctly 1`] = `
-
- +
+
+
基础用法
+ +
+
+
展示取消按钮
+ +
+
+
展示描述信息
+ +
-
- +
+
+
选项状态
+ +
-
- -
-
- -
-
- +
+
+
自定义面板
+ +
+ + + + +
`;