[improvement] TreeSelect: support disable option (#926)

example/pages/tree-select/config.js

@@ -2,29 +2,30 @@ export default {
   pro1Name: '浙江',
   pro1: [{
     text: '杭州',
-    id: 1001
+    id: 1
   }, {
     text: '温州',
-    id: 1002
+    id: 2
   }, {
     text: '宁波',
-    id: 1003
+    id: 3,
+    disabled: true
   }, {
     text: '义乌',
-    id: 1004
+    id: 4
   }],
   pro2Name: '江苏',
   pro2: [{
     text: '南京',
-    id: 1011
+    id: 5
   }, {
     text: '无锡',
-    id: 1012
+    id: 6
   }, {
     text: '徐州',
-    id: 1013
+    id: 7
   }, {
     text: '苏州',
-    id: 1014
+    id: 8
   }]
 };

example/pages/tree-select/index.js

@@ -20,7 +20,7 @@ Page({
       }
     ],
     mainActiveIndex: 0,
-    activeId: 1002
+    activeId: 1
   },
 
   onClickNav({ detail }) {

packages/tree-select/README.md

@@ -58,9 +58,9 @@ Page({
 
 ### 数据格式
 #### items 分类显示所需数据的数据结构
-`items` 整体为一个数组，数组内包含一系列描述分类的 object。
+`items` 整体为一个数组，数组内包含一系列描述分类的对象
 
-每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项
+每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项
 
 ```javascript
 [
@@ -70,16 +70,16 @@ Page({
     // 该导航下所有的可选项
     children: [
       {
-        // 可选项的名称
+        // 名称
         text: '温州',
-        // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
-        id: 1002
+        // id，作为匹配选中状态的标识
+        id: 1,
+        // 禁用选项
+        disabled: true
       },
       {
-        // 可选项的名称
         text: '杭州',
-        // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
-        id: 1001
+        id: 2
       }
     ]
   }

packages/tree-select/index.less

@@ -46,6 +46,11 @@
     &--active {
       color: @red;
     }
+
+    &--disabled,
+    &--disabled:active {
+      color: @gray;
+    }
   }
 
   &__selected {

packages/tree-select/index.ts

@@ -42,7 +42,10 @@ VantComponent({
   methods: {
     // 当一个子项被选择时
     onSelectItem(event: Weapp.Event) {
-      this.$emit('click-item', event.currentTarget.dataset.item);
+      const { item } = event.currentTarget.dataset;
+      if (!item.disabled) {
+        this.$emit('click-item', item);
+      }
     },
 
     // 当一个导航被点击时

packages/tree-select/index.wxml

@@ -21,7 +21,7 @@
     <view
       wx:for="{{ subItems }}"
       wx:key="item.id"
-      class="van-tree-select__item van-ellipsis {{ activeId === item.id ? 'van-tree-select__item--active' : '' }}"
+      class="van-tree-select__item van-ellipsis {{ activeId === item.id ? 'van-tree-select__item--active' : '' }} {{ item.disabled ? 'van-tree-select__item--disabled' : '' }}"
       data-item="{{ item }}"
       bind:tap="onSelectItem"
     >