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}
{props.closeable ? (
-
+
) : null}
);
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`] = `
+
+
+`;
+
exports[`should render title slot correctly 1`] = `
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`
`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` |