feat(tree-select): add new prop selected-icon & badge & dot (#3565)

fix #3489

example/pages/tree-select/config.js

@@ -1,39 +1,52 @@
 export default {
   pro1Name: '浙江',
-  pro1: [{
-    text: '杭州',
-    id: 1
-  }, {
-    text: '温州',
-    id: 2
-  }, {
-    text: '宁波',
-    id: 3,
-    disabled: true
-  }, {
-    text: '义乌',
-    id: 4
-  }],
+  pro1: [
+    {
+      text: '杭州',
+      id: 1,
+    },
+    {
+      text: '温州',
+      id: 2,
+    },
+    {
+      text: '宁波',
+      id: 3,
+      disabled: true,
+    },
+    {
+      text: '义乌',
+      id: 4,
+    },
+  ],
   pro2Name: '江苏',
-  pro2: [{
-    text: '南京',
-    id: 5
-  }, {
-    text: '无锡',
-    id: 6
-  }, {
-    text: '徐州',
-    id: 7
-  }, {
-    text: '苏州',
-    id: 8
-  }],
+  pro2: [
+    {
+      text: '南京',
+      id: 5,
+    },
+    {
+      text: '无锡',
+      id: 6,
+    },
+    {
+      text: '徐州',
+      id: 7,
+    },
+    {
+      text: '苏州',
+      id: 8,
+    },
+  ],
   pro3Name: '福建',
-  pro3: [{
-    text: '泉州',
-    id: 9
-  }, {
-    text: '厦门',
-    id: 10
-  }]
+  pro3: [
+    {
+      text: '泉州',
+      id: 9,
+    },
+    {
+      text: '厦门',
+      id: 10,
+    },
+  ],
 };

example/pages/tree-select/index.js

@@ -1,32 +1,44 @@
 import Page from '../../common/page';
 import config from './config';
 
+const items = [
+  {
+    text: config.pro1Name,
+    children: config.pro1,
+  },
+  {
+    text: config.pro2Name,
+    children: config.pro2,
+  },
+  {
+    text: config.pro3Name,
+    disabled: true,
+    children: config.pro3,
+  },
+];
+
 Page({
   data: {
-    items: [{
-      text: '所有城市',
-      children: [...config.pro1, ...config.pro2]
-    }, {
-      text: config.pro1Name,
-      children: config.pro1
-    }, {
-      text: config.pro2Name,
-      children: config.pro2
-    }, {
-      text: config.pro3Name,
-      disabled: true,
-      children: config.pro3
-    }
-    ],
+    items,
+    badgeItems: items.slice(0, 2).map((item, index) => {
+      if (index === 0) {
+        return { ...item, dot: true };
+      }
+      if (index === 1) {
+        return { ...item, badge: 5 };
+      }
+
+      return item;
+    }),
     mainActiveIndex: 0,
     activeId: 0,
     mainActiveIndexMulti: 0,
-    activeIdMulti: []
+    activeIdMulti: [],
   },
 
   onClickNav({ detail }) {
     this.setData({
-      mainActiveIndex: detail.index || 0
+      mainActiveIndex: detail.index || 0,
     });
   },
 
@@ -38,7 +50,7 @@ Page({
 
   onClickNavMulti({ detail }) {
     this.setData({
-      mainActiveIndexMulti: detail.index || 0
+      mainActiveIndexMulti: detail.index || 0,
     });
   },
 
@@ -52,5 +64,5 @@ Page({
     }
 
     this.setData({ activeIdMulti });
-  }
+  },
 });

example/pages/tree-select/index.wxml

@@ -44,3 +44,13 @@
     />
   </van-tree-select>
 </demo-block>
+
+<demo-block title="徽标提示">
+  <van-tree-select
+    items="{{ badgeItems }}"
+    main-active-index="{{ mainActiveIndex }}"
+    active-id="{{ activeId }}"
+    bind:click-item="onClickItem"
+    bind:click-nav="onClickNav"
+  ></van-tree-select>
+</demo-block>

packages/tree-select/README.md

@@ -115,6 +115,7 @@ Page({
 | main-active-index | 左侧选中项的索引 | _number_ | `0` | - |
 | active-id | 右侧选中项的 id，支持传入数组 | _string \| number \| Array_ | `0` | - |
 | max | 右侧项最大选中个数 | _number_ | _Infinity_ | - |
+| selected-icon `v1.5.0` | 自定义右侧栏选中状态的图标 | _string_ | `success` |
 
 ### Events
 
@@ -140,6 +141,10 @@ Page({
   {
     // 导航名称
     text: '所有城市',
+    // 导航名称右上角徽标，1.5.0 版本开始支持
+    badge: 3,
+    // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持
+    dot: true,
     // 禁用选项
     disabled: false,
     // 该导航下所有的可选项

packages/tree-select/index.ts

@@ -30,6 +30,10 @@ VantComponent({
       type: Number,
       value: Infinity,
     },
+    selectedIcon: {
+      type: String,
+      value: 'success',
+    },
   },
 
   data: {

packages/tree-select/index.wxml

@@ -13,6 +13,8 @@
         custom-class="main-item-class"
         active-class="main-active-class"
         disabled-class="main-disabled-class"
+        badge="{{ item.badge }}"
+        dot="{{ item.dot }}"
         title="{{ item.text }}"
         disabled="{{ item.disabled }}"
       />
@@ -30,7 +32,7 @@
       {{ item.text }}
       <van-icon
         wx:if="{{ wxs.isActive(activeId, item.id) }}"
-        name="checked"
+        name="{{ selectedIcon }}"
         size="16px"
         class="van-tree-select__selected"
       />