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'));
},
},
};