docs(ActionSheet): improve demo

src/action-sheet/README.md

@@ -16,6 +16,7 @@ Vue.use(ActionSheet);
 Use `actions` prop to set options of action-sheet.
 
 ```html
+<van-cell is-link title="Basic Usage" @click="show = true" />
 <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
 ```
 
@@ -27,9 +28,9 @@ export default {
     return {
       show: false,
       actions: [
-        { name: 'Option' },
+        { name: 'Option 1' },
-        { name: 'Option' },
+        { name: 'Option 2' },
-        { name: 'Option', subname: 'Description' },
+        { 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
-<van-action-sheet v-model="show" :actions="actions" description="Description" />
-```
-
-### Option Status
-
 ```html
 <van-action-sheet
   v-model="show"
   :actions="actions"
   cancel-text="Cancel"
-  @cancel="onCancel"
+  description="Description"
+  close-on-click-action
 />
 ```
 
@@ -94,9 +95,35 @@ export default {
     return {
       show: false,
       actions: [
-        { name: 'Option', color: '#07c160' },
+        { name: 'Option 1' },
-        { loading: true },
+        { name: 'Option 2' },
+        { name: 'Option 3', subname: 'Description' },
+      ],
+    };
+  },
+};
+```
+
+### Option Status
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+  cancel-text="Cancel"
+  close-on-click-action
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: 'Colored Option', color: '#07c160' },
         { name: 'Disabled Option', disabled: true },
+        { name: 'Loading Option', loading: true },
       ],
     };
   },

src/action-sheet/README.zh-CN.md

@@ -17,9 +17,10 @@ Vue.use(ActionSheet);
 
 ### 基础用法
 
-动作面板通过`actions`属性来定义选项，数组的每一项是一个对象，对象格式见文档下方表格。
+动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。
 
 ```html
+<van-cell is-link title="基础用法" @click="show = true" />
 <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
 ```
 
@@ -30,11 +31,7 @@ export default {
   data() {
     return {
       show: false,
-      actions: [
+      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
-        { name: '选项' },
-        { name: '选项' },
-        { name: '选项', subname: '描述信息' },
-      ],
     };
   },
   methods: {
@@ -50,13 +47,14 @@ export default {
 
 ### 展示取消按钮
 
-设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前面板
+设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。
 
 ```html
 <van-action-sheet
   v-model="show"
   :actions="actions"
   cancel-text="取消"
+  close-on-click-action
   @cancel="onCancel"
 />
 ```
@@ -68,12 +66,12 @@ export default {
   data() {
     return {
       show: false,
+      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
     };
   },
   methods: {
     onCancel() {
-      this.show = false;
+      Toast('取消');
-      Toast('cancel');
     },
   },
 };
@@ -81,26 +79,15 @@ export default {
 
 ### 展示描述信息
 
-设置`description`属性后，会在选项上方显示描述信息
+通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。
-
-```html
-<van-action-sheet
-  v-model="show"
-  :actions="actions"
-  description="这是一段描述信息"
-/>
-```
-
-### 选项状态
-
-可以将选项设置为加载状态或禁用状态，或者通过`color`设置选项颜色
 
 ```html
 <van-action-sheet
   v-model="show"
   :actions="actions"
   cancel-text="取消"
-  @cancel="onCancel"
+  description="这是一段描述信息"
+  close-on-click-action
 />
 ```
 
@@ -110,9 +97,37 @@ export default {
     return {
       show: false,
       actions: [
-        { name: '选项', color: '#07c160' },
+        { name: '选项一' },
-        { loading: true },
+        { name: '选项二' },
+        { name: '选项三', subname: '描述信息' },
+      ],
+    };
+  },
+};
+```
+
+### 选项状态
+
+可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+  cancel-text="取消"
+  close-on-click-action
+/>
+```
+
+```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` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
 
 | 键名      | 说明                     | 类型      |
 | --------- | ------------------------ | --------- |

src/action-sheet/demo/index.vue

@@ -28,13 +28,6 @@
       @select="onSelect"
     />
 
-    <van-action-sheet
-      v-model="show.status"
-      close-on-click-action
-      :actions="statusActions"
-      :cancel-text="t('cancel')"
-    />
-
     <van-action-sheet
       v-model="show.cancel"
       :actions="simpleActions"
@@ -45,11 +38,19 @@
 
     <van-action-sheet
       v-model="show.description"
-      :actions="simpleActions"
+      :actions="actionsWithDescription"
       close-on-click-action
+      :cancel-text="t('cancel')"
       :description="t('description')"
     />
 
+    <van-action-sheet
+      v-model="show.status"
+      close-on-click-action
+      :actions="statusActions"
+      :cancel-text="t('cancel')"
+    />
+
     <van-action-sheet v-model="show.title" :title="t('title')">
       <div class="demo-action-sheet-content">{{ t('content') }}</div>
     </van-action-sheet>
@@ -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('option1') },
-        { name: this.t('option') },
+        { name: this.t('option2') },
-        { name: this.t('option'), subname: this.t('subname') },
+        { 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 },
+        { name: this.t('coloredOption'), color: GREEN },
-        { loading: true },
         { name: this.t('disabledOption'), disabled: true },
+        { loading: true },
       ];
     },
   },
@@ -120,7 +137,7 @@ export default {
     },
 
     onCancel() {
-      this.$toast('cancel');
+      this.$toast(this.t('cancel'));
     },
   },
 };