feat(Cascader): add close-icon prop (#8334)

src/cascader/Cascader.tsx

@@ -44,6 +44,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    closeIcon: {
+      type: String,
+      default: 'cross',
+    },
   },
 
   emits: ['close', 'change', 'finish', 'update:modelValue'],
@@ -182,7 +186,11 @@ export default defineComponent({
           {slots.title ? slots.title() : props.title}
         </h2>
         {props.closeable ? (
-          <Icon name="cross" class={bem('close-icon')} onClick={onClose} />
+          <Icon
+            name={props.closeIcon}
+            class={bem('close-icon')}
+            onClick={onClose}
+          />
         ) : null}
       </div>
     );

src/cascader/README.md

@@ -203,6 +203,7 @@ export default {
 | placeholder | Placeholder of unselected tab | _string_ | `Select` |
 | active-color | Active color | _string_ | `#ee0a24` |
 | closeable | Whether to show close icon | _boolean_ | `true` |
+| close-icon `v3.0.10` | Close icon name | _string_ | `cross` |
 | field-names `v3.0.4` | Custom the fields of options | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
 
 ### Events

src/cascader/README.zh-CN.md

@@ -217,6 +217,7 @@ export default {
 | placeholder | 未选中时的提示文案 | _string_ | `请选择` |
 | active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` |
 | closeable | 是否显示关闭图标 | _boolean_ | `true` |
+| close-icon `v3.0.10` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
 | field-names `v3.0.4` | 自定义 `options` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
 
 ### Events

src/cascader/test/__snapshots__/index.spec.ts.snap

@@ -1,5 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should change close icon when using close-icon prop 1`] = `
+<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon">
+</i>
+`;
+
 exports[`should render title slot correctly 1`] = `
 <h2 class="van-cascader__title">
   Custom Title

src/cascader/test/index.spec.ts

@@ -70,6 +70,15 @@ test('should not render close icon when closeable is false', () => {
   expect(wrapper.find('.van-cascader__close-icon').exists()).toBeFalsy();
 });
 
+test('should change close icon when using close-icon prop', () => {
+  const wrapper = mount(Cascader, {
+    props: {
+      closeIcon: 'success',
+    },
+  });
+  expect(wrapper.find('.van-cascader__close-icon').html()).toMatchSnapshot();
+});
+
 test('should render title slot correctly', () => {
   const wrapper = mount(Cascader, {
     slots: {

src/popup/README.zh-CN.md

@@ -136,7 +136,7 @@ export default {
 | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
 | closeable | 是否显示关闭图标 | _boolean_ | `false` |
-| close-icon | 关闭图标名称或图片链接 | _string_ | `cross` |
+| close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
 | close-icon-position | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
 | transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
 | transition-appear | 是否在初始渲染时启用过渡动画 | _boolean_ | `false` |