From c424d6efcdf6bd97e1ff3dcef3ab3903bc085cb1 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 14 Mar 2021 11:20:08 +0800
Subject: [PATCH] feat(Cascader): add close-icon prop (#8334)

---
 src/cascader/Cascader.tsx                          | 10 +++++++++-
 src/cascader/README.md                             |  1 +
 src/cascader/README.zh-CN.md                       |  1 +
 src/cascader/test/__snapshots__/index.spec.ts.snap |  5 +++++
 src/cascader/test/index.spec.ts                    |  9 +++++++++
 src/popup/README.zh-CN.md                          |  2 +-
 6 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index 7fbac371d..7137311eb 100644
--- a/src/cascader/Cascader.tsx
+++ b/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>
     );
diff --git a/src/cascader/README.md b/src/cascader/README.md
index 4ebee93dc..4c6dfe7bc 100644
--- a/src/cascader/README.md
+++ b/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
diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md
index 75f790c04..b7db776d9 100644
--- a/src/cascader/README.zh-CN.md
+++ b/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
diff --git a/src/cascader/test/__snapshots__/index.spec.ts.snap b/src/cascader/test/__snapshots__/index.spec.ts.snap
index 5cfccc768..4179cd931 100644
--- a/src/cascader/test/__snapshots__/index.spec.ts.snap
+++ b/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
diff --git a/src/cascader/test/index.spec.ts b/src/cascader/test/index.spec.ts
index 1944f7330..9d595135b 100644
--- a/src/cascader/test/index.spec.ts
+++ b/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: {
diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md
index 569a3d299..7564f76d3 100644
--- a/src/popup/README.zh-CN.md
+++ b/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` |