From 52dbc7563cfa2e32adb2e61486f775d498456e23 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Tue, 26 May 2020 10:11:27 +0800 Subject: [PATCH] docs(ActionSheet): improve demo --- src/action-sheet/README.md | 53 ++++++++++++++++++------- src/action-sheet/README.zh-CN.md | 67 +++++++++++++++++++------------- src/action-sheet/demo/index.vue | 49 +++++++++++++++-------- 3 files changed, 114 insertions(+), 55 deletions(-) diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index b6c00b64d..a79ac6ccc 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -16,6 +16,7 @@ Vue.use(ActionSheet); Use `actions` prop to set options of action-sheet. ```html + ``` @@ -27,9 +28,9 @@ export default { return { show: false, actions: [ - { name: 'Option' }, - { name: 'Option' }, - { name: 'Option', subname: 'Description' }, + { name: 'Option 1' }, + { name: 'Option 2' }, + { name: 'Option 3' }, ], }; }, @@ -49,6 +50,7 @@ export default { v-model="show" :actions="actions" cancel-text="Cancel" + close-on-click-action @cancel="onCancel" /> ``` @@ -60,11 +62,15 @@ export default { data() { return { show: false, + actions: [ + { name: 'Option 1' }, + { name: 'Option 2' }, + { name: 'Option 3' }, + ], }; }, methods: { onCancel() { - this.show = false; Toast('cancel'); }, }, @@ -73,18 +79,13 @@ export default { ### Show Description -```html - -``` - -### Option Status - ```html ``` @@ -94,9 +95,35 @@ export default { return { show: false, actions: [ - { name: 'Option', color: '#07c160' }, - { loading: true }, + { name: 'Option 1' }, + { name: 'Option 2' }, + { name: 'Option 3', subname: 'Description' }, + ], + }; + }, +}; +``` + +### Option Status + +```html + +``` + +```js +export default { + data() { + return { + show: false, + actions: [ + { name: 'Colored Option', color: '#07c160' }, { name: 'Disabled Option', disabled: true }, + { name: 'Loading Option', loading: true }, ], }; }, diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index ce6f29471..0993e4e71 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -17,9 +17,10 @@ Vue.use(ActionSheet); ### 基础用法 -动作面板通过`actions`属性来定义选项，数组的每一项是一个对象，对象格式见文档下方表格。 +动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。 ```html + ``` @@ -30,11 +31,7 @@ export default { data() { return { show: false, - actions: [ - { name: '选项' }, - { name: '选项' }, - { name: '选项', subname: '描述信息' }, - ], + actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }], }; }, methods: { @@ -50,13 +47,14 @@ export default { ### 展示取消按钮 -设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前面板 +设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。 ```html ``` @@ -68,12 +66,12 @@ export default { data() { return { show: false, + actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }], }; }, methods: { onCancel() { - this.show = false; - Toast('cancel'); + Toast('取消'); }, }, }; @@ -81,26 +79,15 @@ export default { ### 展示描述信息 -设置`description`属性后，会在选项上方显示描述信息 - -```html - -``` - -### 选项状态 - -可以将选项设置为加载状态或禁用状态，或者通过`color`设置选项颜色 +通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。 ```html ``` @@ -110,9 +97,37 @@ export default { return { show: false, actions: [ - { name: '选项', color: '#07c160' }, - { loading: true }, + { name: '选项一' }, + { name: '选项二' }, + { name: '选项三', subname: '描述信息' }, + ], + }; + }, +}; +``` + +### 选项状态 + +可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色 + +```html + +``` + +```js +export default { + data() { + return { + show: false, + actions: [ + { name: '着色选项', color: '#07c160' }, { name: '禁用选项', disabled: true }, + { name: '加载选项', loading: true }, ], }; }, @@ -160,7 +175,7 @@ export default { ### Action 数据结构 -`actions`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值： +`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值： | 键名 | 说明 | 类型 | | --------- | ------------------------ | --------- | diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue index 01979c46b..87064ecb3 100644 --- a/src/action-sheet/demo/index.vue +++ b/src/action-sheet/demo/index.vue @@ -28,13 +28,6 @@ @select="onSelect" /> - - + +
{{ t('content') }}
 @@ -62,22 +63,30 @@ import { GREEN } from '../../utils/constant'; export default { i18n: { 'zh-CN': { - subname: '副文本', + option1: '选项一', + option2: '选项二', + option3: '选项三', + subname: '描述信息', showCancel: '展示取消按钮', buttonText: '弹出菜单', customPanel: '自定义面板', description: '这是一段描述信息', optionStatus: '选项状态', + coloredOption: '着色选项', disabledOption: '禁用选项', showDescription: '展示描述信息', }, 'en-US': { - subname: 'Subname', + option1: 'Option 1', + option2: 'Option 2', + option3: 'Option 3', + subname: 'Description', showCancel: 'Show Cancel Button', buttonText: 'Show ActionSheet', customPanel: 'Custom Panel', description: 'Description', optionStatus: 'Option Status', + coloredOption: 'Colored Option', disabledOption: 'Disabled Option', showDescription: 'Show Description', }, @@ -98,17 +107,25 @@ export default { computed: { simpleActions() { return [ - { name: this.t('option') }, - { name: this.t('option') }, - { name: this.t('option'), subname: this.t('subname') }, + { name: this.t('option1') }, + { name: this.t('option2') }, + { name: this.t('option3') }, + ]; + }, + + actionsWithDescription() { + return [ + { name: this.t('option1') }, + { name: this.t('option2') }, + { name: this.t('option3'), subname: this.t('subname') }, ]; }, statusActions() { return [ - { name: this.t('option'), color: GREEN }, - { loading: true }, + { name: this.t('coloredOption'), color: GREEN }, { name: this.t('disabledOption'), disabled: true }, + { loading: true }, ]; }, }, @@ -120,7 +137,7 @@ export default { }, onCancel() { - this.$toast('cancel'); + this.$toast(this.t('cancel')); }, }, };