[Improvement] Actionsheet: support disable option (#1293)

docs/src/doc.config.js

@@ -216,7 +216,7 @@ module.exports = {
             list: [
               {
                 path: '/actionsheet',
-                title: 'Actionsheet - 行动按钮'
+                title: 'Actionsheet - 上拉菜单'
               },
               {
                 path: '/datetime-picker',

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 }
       ];
     }
   },

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 |

packages/actionsheet/index.vue

@@ -8,7 +8,7 @@
       <ul v-else class="van-hairline--bottom">
         <li
           v-for="item in actions"
-          :class="[b('item'), item.className, 'van-hairline--top']"
+          :class="[b('item', { disabled: item.disabled }), item.className, 'van-hairline--top']"
           @click.stop="onClickItem(item)"
         >
           <template v-if="!item.loading">
@@ -60,7 +60,7 @@ export default create({
 
   methods: {
     onClickItem(item) {
-      if (typeof item.callback === 'function') {
+      if (item.callback && !item.disabled) {
         item.callback(item);
       }
     },

packages/actionsheet/test/__snapshots__/demo.spec.js.snap

@@ -14,6 +14,9 @@ exports[`renders demo correctly 1`] = `
         <li class="van-actionsheet__item van-hairline--top">
           <div class="van-loading van-loading--circular van-loading--black van-actionsheet__loading" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
         </li>
+        <li class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">禁用选项</span>
+          <!---->
+        </li>
       </ul>
       <div class="van-actionsheet__content"></div>
     </div>
@@ -30,6 +33,9 @@ exports[`renders demo correctly 1`] = `
         <li class="van-actionsheet__item van-hairline--top">
           <div class="van-loading van-loading--circular van-loading--black van-actionsheet__loading" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
         </li>
+        <li class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">禁用选项</span>
+          <!---->
+        </li>
       </ul>
       <div class="van-actionsheet__cancel van-hairline--top">取消</div>
     </div>

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 的对象信息 |

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;