[new feature] DropdownItem: add disabled prop

packages/dropdown-item/index.js

@@ -12,7 +12,8 @@ export default sfc({
   props: {
     value: null,
     title: String,
-    options: Array
+    options: Array,
+    disabled: Boolean
   },
 
   data() {

packages/dropdown-menu/demo/index.vue

@@ -41,6 +41,21 @@
         </van-dropdown-item>
       </van-dropdown-menu>
     </demo-block>
+
+    <demo-block :title="$t('disableMenu')">
+      <van-dropdown-menu>
+        <van-dropdown-item
+          v-model="value1"
+          disabled
+          :options="option1"
+        />
+        <van-dropdown-item
+          v-model="value2"
+          disabled
+          :options="option2"
+        />
+      </van-dropdown-menu>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -49,6 +64,7 @@ export default {
   i18n: {
     'zh-CN': {
       customContent: '自定义菜单内容',
+      disableMenu: '禁用菜单',
       switchTitle1: '包邮',
       switchTitle2: '团购',
       itemTitle: '筛选',
@@ -65,6 +81,7 @@ export default {
     },
     'en-US': {
       customContent: 'Custom Content',
+      disableMenu: 'Disable Menu',
       switchTitle1: 'Title',
       switchTitle2: 'Title',
       itemTitle: 'Title',

packages/dropdown-menu/en-US.md

@@ -94,6 +94,7 @@ export default {
 | value | Value of current option，can use `v-model` | `String | Number` | - |
 | title | Item title | `String` | Text of selected option |
 | options | Options | `Array` | `[]` |
+| disabled | Whether to disable dropdown item | `Boolean` | `false` |
 
 ### DropdownItem Events
 

packages/dropdown-menu/index.js

@@ -61,9 +61,11 @@ export default sfc({
   render(h) {
     const Titles = this.children.map((item, index) => (
       <div
-        class={bem('item')}
+        class={bem('item', { disabled: item.disabled })}
         onClick={() => {
-          this.toggleItem(index);
+          if (!item.disabled) {
+            this.toggleItem(index);
+          }
         }}
       >
         <span

packages/dropdown-menu/index.less

@@ -15,6 +15,16 @@
     &:active {
       opacity: .7;
     }
+
+    &--disabled {
+      &:active {
+        opacity: 1;
+      }
+
+      .van-dropdown-menu__title {
+        color: @gray-dark;
+      }
+    }
   }
 
   &__title {

packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap

@@ -26,5 +26,17 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-dropdown-menu van-hairline--top-bottom">
+      <div class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">全部商品</span></div>
+      <div class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">默认排序</span></div>
+      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+        <!---->
+      </div>
+      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
 </div>
 `;

packages/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -45,6 +45,15 @@ exports[`didn\`t find matched option 1`] = `
 </div>
 `;
 
+exports[`disable dropdown item 1`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">A</span></div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <!---->
+  </div>
+</div>
+`;
+
 exports[`show dropdown item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active" style="color: rgb(25, 137, 250);">A</span></div>

packages/dropdown-menu/test/index.spec.js

@@ -99,6 +99,32 @@ test('destroy one item', async () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('disable dropdown item', async () => {
+  const wrapper = mount({
+    template: `
+      <dropdown-menu>
+        <dropdown-item disabled v-model="value" :options="options" />
+      </dropdown-menu>
+    `,
+    components: {
+      DropdownItem,
+      DropdownMenu
+    },
+    data() {
+      return {
+        value: 0,
+        options: [
+          { text: 'A', value: 0 },
+          { text: 'B', value: 1 }
+        ]
+      };
+    }
+  });
+
+  const title = wrapper.find('.van-dropdown-menu__title');
+  title.trigger('click');
+  expect(wrapper).toMatchSnapshot();
+});
 
 test('change event', async () => {
   const onChange = jest.fn();

packages/dropdown-menu/zh-CN.md

@@ -78,6 +78,15 @@ export default {
 };
 ```
 
+### 禁用菜单
+
+```html
+<van-dropdown-menu>
+  <van-dropdown-item v-model="value1" disabled :options="option1" />
+  <van-dropdown-item v-model="value2" disabled :options="option2" />
+</van-dropdown-menu>
+```
+
 ## API
 
 ### DropdownMenu Props
@@ -96,6 +105,7 @@ export default {
 | value | 当前选中项对应的 value，可以通过`v-model`双向绑定 | `String | Number` | - | - |
 | title | 菜单项标题 | `String` | 当前选中项文字 | - |
 | options | 选项数组 | `Array` | `[]` | - |
+| disabled | 是否禁用菜单 | `Boolean` | `false` | - |
 
 ### DropdownItem Events