feat(TreeSelect): add selected-icon prop (#6615)

src/tree-select/README.md

@@ -118,6 +118,7 @@ export default {
 | main-active-index | The index of selected parent node | _number \| string_ | `0` |
 | active-id | Id of selected item | _number \| string \|<br>(number \| string)[]_ | `0` |
 | max `v2.2.0` | Maximum number of selected items | _number \| string_ | `Infinity` |
+| selected-icon `v2.9.0` | Selected icon | _string_ | `success` |
 
 ### Events
 

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

@@ -126,6 +126,7 @@ export default {
 | main-active-index | 左侧选中项的索引 | _number \| string_ | `0` |
 | active-id | 右侧选中项的 id，支持传入数组 | _number \| string \|<br>(number \| string)[]_ | `0` |
 | max `v2.2.0` | 右侧项最大选中个数 | _number \| string_ | `Infinity` |
+| selected-icon `v2.9.0` | 自定义右侧栏选中状态的图标 | _string_ | `success` |
 
 ### Events
 

src/tree-select/index.tsx

@@ -34,6 +34,7 @@ export type TreeSelectProps = {
   height: number | string;
   items: TreeSelectItem[];
   activeId: TreeSelectActiveId;
+  selectedIcon: string;
   mainActiveIndex: number | string;
 };
 
@@ -49,7 +50,7 @@ function TreeSelect(
   slots: TreeSelectSlots,
   ctx: RenderContext<TreeSelectProps>
 ) {
-  const { height, items, mainActiveIndex, activeId } = props;
+  const { items, height, activeId, selectedIcon, mainActiveIndex } = props;
 
   const selectedItem: Partial<TreeSelectItem> = items[+mainActiveIndex] || {};
   const subItems = selectedItem.children || [];
@@ -110,7 +111,7 @@ function TreeSelect(
       >
         {item.text}
         {isActiveItem(item.id) && (
-          <Icon name="success" class={bem('selected')} />
+          <Icon name={selectedIcon} class={bem('selected')} />
         )}
       </div>
     ));
@@ -152,6 +153,10 @@ TreeSelect.props = {
     type: [Number, String, Array],
     default: 0,
   },
+  selectedIcon: {
+    type: String,
+    default: 'success',
+  },
   mainActiveIndex: {
     type: [Number, String],
     default: 0,

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

@@ -34,3 +34,8 @@ exports[`nav info 1`] = `
   <div class="van-tree-select__content"></div>
 </div>
 `;
+
+exports[`selected-icon prop 1`] = `
+<div class="van-ellipsis van-tree-select__item van-tree-select__item--active">city1<i class="van-icon van-icon-foo van-tree-select__selected">
+    <!----></i></div>
+`;

src/tree-select/test/index.spec.js

@@ -330,3 +330,16 @@ test('should sync value before trigger click-item event', (done) => {
   const items = wrapper.findAll('.van-tree-select__item');
   items.at(1).trigger('click');
 });
+
+test('selected-icon prop', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: mockItems,
+      activeId: 1,
+      mainActiveIndex: 0,
+      selectedIcon: 'foo',
+    },
+  });
+
+  expect(wrapper.find('.van-tree-select__item')).toMatchSnapshot();
+});