feat(TreeSelect): add dot option (#4433)

src/tree-select/README.md

@@ -64,14 +64,8 @@ export default {
   :main-active-index.sync="activeIndex"
 >
   <template slot="content">
-    <van-image
-      v-if="activeIndex === 0"
-      src="https://img.yzcdn.cn/vant/apple-1.jpg"
-    />
-    <van-image
-      v-if="activeIndex === 1"
-      src="https://img.yzcdn.cn/vant/apple-2.jpg"
-    />
+    <van-image v-if="activeIndex === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+    <van-image v-if="activeIndex === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
   </template>
 </van-tree-select>
 ```
@@ -87,6 +81,30 @@ export default {
 }
 ```
 
+### Show Info
+
+```html
+<van-tree-select
+  height="55vw"
+  :items="items"
+  :main-active-index.sync="activeIndex"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      activeIndex: 0,
+      items: [
+        { text: 'Group 1', children: [], dot: true },
+        { text: 'Group 2', children: [], info: 5 }
+      ]
+    }
+  }
+}
+```
+
 ## API
 
 ### Props
@@ -125,6 +143,8 @@ In every tree object, `text` property defines `id` stands for the unique key whi
     text: 'Group 1',
     // info
     info: 3,
+    // Whether to show red dot
+    dot: true,
     // leaves of this parent node
     children: [
       {

src/tree-select/README.zh-CN.md

@@ -70,14 +70,8 @@ export default {
   :main-active-index.sync="activeIndex"
 >
   <template slot="content">
-    <van-image
-      v-if="activeIndex === 0"
-      src="https://img.yzcdn.cn/vant/apple-1.jpg"
-    />
-    <van-image
-      v-if="activeIndex === 1"
-      src="https://img.yzcdn.cn/vant/apple-2.jpg"
-    />
+    <van-image v-if="activeIndex === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+    <van-image v-if="activeIndex === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
   </template>
 </van-tree-select>
 ```
@@ -93,6 +87,32 @@ export default {
 }
 ```
 
+### 提示信息
+
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
+
+```html
+<van-tree-select
+  height="55vw"
+  :items="items"
+  :main-active-index.sync="activeIndex"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      activeIndex: 0,
+      items: [
+        { text: '浙江', children: [], dot: true },
+        { text: '江苏', children: [], info: 5 }
+      ]
+    }
+  }
+}
+```
+
 ## API
 
 ### Props
@@ -129,6 +149,8 @@ export default {
     text: '所有城市',
     // 导航名称右上角徽标
     info: 3,
+    // 是否在导航名称右上角显示小红点
+    dot: true,
     // 该导航下所有的可选项
     children: [
       {

src/tree-select/demo/index.vue

@@ -24,16 +24,22 @@
         </template>
       </van-tree-select>
     </demo-block>
+
+    <demo-block :title="$t('showInfo')">
+      <van-tree-select height="55vw" :items="infoItems" :active-id.sync="activeId2" :main-active-index.sync="activeIndex4" />
+    </demo-block>
   </demo-section>
 </template>
 
 <script>
 import { zhCNData } from './data.zh-CN';
 import { enUSData } from './data.en-US';
+import { deepClone } from '../../utils/deep-clone';
 
 export default {
   i18n: {
     'zh-CN': {
+      showInfo: '提示信息',
       radioMode: '单选模式',
       multipleMode: '多选模式',
       customContent: '自定义内容',
@@ -41,6 +47,7 @@ export default {
       dataSimple: [{ text: '分组 1' }, { text: '分组 2' }]
     },
     'en-US': {
+      showInfo: 'Show Info',
       radioMode: 'Radio Mode',
       multipleMode: 'Multiple Mode',
       customContent: 'Custom Content',
@@ -56,7 +63,8 @@ export default {
       activeIds: [1, 2],
       activeIndex: 0,
       activeIndex2: 0,
-      activeIndex3: 0
+      activeIndex3: 0,
+      activeIndex4: 0
     };
   },
 
@@ -67,6 +75,15 @@ export default {
 
     simpleItems() {
       return this.$t('dataSimple');
+    },
+
+    infoItems() {
+      const data = deepClone(this.$t('data')).slice(0, 2);
+
+      data[0].dot = true;
+      data[1].info = 5;
+
+      return data;
     }
   }
 };

src/tree-select/index.tsx

@@ -10,6 +10,7 @@ import { DefaultSlots, ScopedSlot } from '../utils/types';
 
 export type TreeSelectItem = {
   text: string;
+  dot?: boolean;
   info?: string | number;
   disabled?: boolean;
   children: TreeSelectChildren[];
@@ -57,6 +58,7 @@ function TreeSelect(
 
   const Navs = items.map(item => (
     <SidebarItem
+      dot={item.dot}
       info={item.info}
       title={item.text}
       disabled={item.disabled}

src/tree-select/test/__snapshots__/demo.spec.js.snap

@@ -71,5 +71,23 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-tree-select" style="height: 55vw;">
+      <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">浙江<div class="van-info van-info--dot van-sidebar-item__info"></div>
+          </div>
+        </a><a class="van-sidebar-item van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">江苏<div class="van-info van-sidebar-item__info">5</div>
+          </div>
+        </a></div>
+      <div class="van-tree-select__content">
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-icon van-icon-checked van-tree-select__selected" style="font-size: 16px;">
+            <!----></i></div>
+        <div class="van-ellipsis van-tree-select__item">温州</div>
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
+        <div class="van-ellipsis van-tree-select__item">义乌</div>
+      </div>
+    </div>
+  </div>
 </div>
 `;