diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index fae31d7ca..dd6ba08c6 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -216,7 +216,7 @@ module.exports = {
list: [
{
path: '/actionsheet',
- title: 'Actionsheet - 行动按钮'
+ title: 'Actionsheet - 上拉菜单'
},
{
path: '/datetime-picker',
diff --git a/packages/actionsheet/demo/index.vue b/packages/actionsheet/demo/index.vue
index aacc1eee8..d77dd76d6 100644
--- a/packages/actionsheet/demo/index.vue
+++ b/packages/actionsheet/demo/index.vue
@@ -28,7 +28,8 @@ export default {
button3: '弹出带标题的 Actionsheet',
title2: '带取消按钮的 Actionsheet',
title3: '带标题的 Actionsheet',
- description: '描述信息'
+ description: '描述信息',
+ disabledOption: '禁用选项'
},
'en-US': {
button1: 'Show Actionsheet',
@@ -36,7 +37,8 @@ export default {
button3: 'Show Actionsheet with title',
title2: 'Actionsheet with cancel button',
title3: 'Actionsheet with title',
- description: 'Description'
+ description: 'Description',
+ disabledOption: 'Disabled Option'
}
},
@@ -53,7 +55,8 @@ export default {
return [
{ name: this.$t('option'), callback: this.onClick },
{ name: this.$t('option'), subname: this.$t('description') },
- { name: this.$t('option'), loading: true }
+ { name: this.$t('option'), loading: true },
+ { name: this.$t('disabledOption'), disabled: true }
];
}
},
diff --git a/packages/actionsheet/en-US.md b/packages/actionsheet/en-US.md
index 710dd2b3b..2b09cbcb5 100644
--- a/packages/actionsheet/en-US.md
+++ b/packages/actionsheet/en-US.md
@@ -33,6 +33,10 @@ export default {
{
name: 'Option',
loading: true
+ },
+ {
+ name: 'Disabled Option',
+ disabled: true
}
]
};
@@ -86,4 +90,5 @@ Actionsheet will get another style if there is a `title` prop.
| subname | Subtitle |
| className | className for the option |
| loading | Whether to be loading status |
+| disabled | Whether to be disabled |
| callback | Triggered when click option |
diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
index 144986442..f1fea5c15 100644
--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@@ -8,7 +8,7 @@
-
@@ -60,7 +60,7 @@ export default create({
methods: {
onClickItem(item) {
- if (typeof item.callback === 'function') {
+ if (item.callback && !item.disabled) {
item.callback(item);
}
},
diff --git a/packages/actionsheet/test/__snapshots__/demo.spec.js.snap b/packages/actionsheet/test/__snapshots__/demo.spec.js.snap
index 43ceb00c5..3c3f4d8bb 100644
--- a/packages/actionsheet/test/__snapshots__/demo.spec.js.snap
+++ b/packages/actionsheet/test/__snapshots__/demo.spec.js.snap
@@ -14,6 +14,9 @@ exports[`renders demo correctly 1`] = `
-
+ - 禁用选项
+
+
@@ -30,6 +33,9 @@ exports[`renders demo correctly 1`] = `
+ 禁用选项
+
+
取消
diff --git a/packages/actionsheet/zh-CN.md b/packages/actionsheet/zh-CN.md
index f67b046ba..8458985b9 100644
--- a/packages/actionsheet/zh-CN.md
+++ b/packages/actionsheet/zh-CN.md
@@ -1,4 +1,4 @@
-## Actionsheet 行动按钮
+## Actionsheet 上拉菜单
### 使用指南
``` javascript
@@ -33,6 +33,10 @@ export default {
{
name: '选项',
loading: true
+ },
+ {
+ name: '禁用选项',
+ disabled: true
}
]
};
@@ -68,11 +72,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
-| actions | 行动按钮数组 | `Array` | `[]` |
+| actions | 菜单选项 | `Array` | `[]` |
| title | 标题 | `String` | - |
-| cancel-text | 取消按钮文案 | `String` | - |
-| overlay | 是否显示遮罩 | `Boolean` | - |
-| close-on-click-overlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - |
+| cancel-text | 取消按钮文字 | `String` | - |
+| overlay | 是否显示遮罩层 | `Boolean` | - |
+| close-on-click-overlay | 点击遮罩是否关闭菜单 | `Boolean` | - |
| get-container | 指定挂载的 HTML 节点 | `() => HTMLElement` | - |
### Event
@@ -89,6 +93,7 @@ export default {
|-----------|-----------|
| name | 标题 |
| subname | 二级标题 |
-| className | 为对应列添加特殊的`class` |
-| loading | 是否是`loading`状态 |
-| callback | 点击时的回调。该回调接受一个参数,参数为当前点击`action`的对象信息 |
+| className | 为对应列添加额外的 class |
+| loading | 是否为加载状态 |
+| disabled | 是否为禁用状态 |
+| callback | 点击时的回调。该回调接受一个参数,参数为当前点击 action 的对象信息 |
diff --git a/packages/vant-css/src/actionsheet.css b/packages/vant-css/src/actionsheet.css
index a6439f11e..cdd7ffa51 100644
--- a/packages/vant-css/src/actionsheet.css
+++ b/packages/vant-css/src/actionsheet.css
@@ -28,6 +28,14 @@
}
}
+ &__item--disabled {
+ color: $gray;
+
+ &:active {
+ background-color: $white;
+ }
+ }
+
&__subname {
font-size: 12px;
color: $gray-darker;