diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 2638b0bfcdc..fb20724bab1 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -51,6 +51,7 @@
- `n-legacy-grid` supports RTL.
- `n-statistic` supports RTL.
- `n-thing` supports RTL.
+- `n-tag` add `trigger-click-on-close` prop, closes [#3343](https://github.com/TuSimple/naive-ui/issues/3343).
- `n-transfer` add `render-source-label` prop.
- `n-transfer` add `render-target-label` prop.
- `n-transfer` add `render-source-list` prop.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index aa2b9cdfc4b..46ee731ba17 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -51,6 +51,7 @@
- `n-legacy-grid` 支持 RTL
- `n-statistic` 支持 RTL
- `n-thing` 支持 RTL
+- `n-tag` 新增 `trigger-click-on-close` 属性,关闭 [#3343](https://github.com/TuSimple/naive-ui/issues/3343)
- `n-transfer` 新增 `render-source-label` 属性
- `n-transfer` 新增 `render-target-label` 属性
- `n-transfer` 新增 `render-source-list` 属性
diff --git a/src/_internal/selection/src/Selection.tsx b/src/_internal/selection/src/Selection.tsx
index 9c0a6060510..bf890ecc385 100644
--- a/src/_internal/selection/src/Selection.tsx
+++ b/src/_internal/selection/src/Selection.tsx
@@ -592,7 +592,6 @@ export default defineComponent({
disabled={disabled}
onClose={() => this.handleDeleteOption(option)}
internalCloseFocusable={false}
- internalStopClickPropagation
>
{{
default: () =>
diff --git a/src/tag/demos/enUS/closable.demo.vue b/src/tag/demos/enUS/closable.demo.vue
index 83da69f7288..11fa4e437db 100644
--- a/src/tag/demos/enUS/closable.demo.vue
+++ b/src/tag/demos/enUS/closable.demo.vue
@@ -16,7 +16,13 @@
Yesterday
-
+
I'm Looking Through You
@@ -32,6 +38,9 @@ export default defineComponent({
return {
handleClose () {
message.info('tag close')
+ },
+ handleClick () {
+ message.info('tag click')
}
}
}
diff --git a/src/tag/demos/enUS/index.demo-entry.md b/src/tag/demos/enUS/index.demo-entry.md
index 5d24dc29978..f36d45e7b3a 100644
--- a/src/tag/demos/enUS/index.demo-entry.md
+++ b/src/tag/demos/enUS/index.demo-entry.md
@@ -32,6 +32,7 @@ icon.vue
| round | `boolean` | `false` | Whether the tag has rounded corners. | |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. | |
| strong | `boolean` | `false` | Whether to use strong text | 2.30.0 |
+| trigger-click-on-close | `boolean` | `false` | Whether the tag triggers click on close. | NEXT_VERSION |
| type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. | |
| on-close | `(e: MouseEvent) => void` | `undefined` | Close clicked callback. | |
| on-update:checked | `(value: boolean) => void` | `undefined` | Checked status change callback. | |
diff --git a/src/tag/demos/zhCN/closable.demo.vue b/src/tag/demos/zhCN/closable.demo.vue
index 1365c062224..7f0313688ce 100644
--- a/src/tag/demos/zhCN/closable.demo.vue
+++ b/src/tag/demos/zhCN/closable.demo.vue
@@ -16,7 +16,12 @@
手写的从前
-
+
哪里都是你
@@ -32,6 +37,9 @@ export default defineComponent({
return {
handleClose () {
message.info('tag close')
+ },
+ handleClick () {
+ message.info('tag click')
}
}
}
diff --git a/src/tag/demos/zhCN/index.demo-entry.md b/src/tag/demos/zhCN/index.demo-entry.md
index 7799dabe933..36b8ad0ec1d 100644
--- a/src/tag/demos/zhCN/index.demo-entry.md
+++ b/src/tag/demos/zhCN/index.demo-entry.md
@@ -33,6 +33,7 @@ rtl-debug.vue
| round | `boolean` | `false` | 是否圆角 | |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 | |
| strong | `boolean` | `false` | 文字是否加粗 | 2.30.0 |
+| trigger-click-on-close | `boolean` | `false` | 关闭时是否触发点击事件 | NEXT_VERSION |
| type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 类型 |
| on-close | `(e: MouseEvent) => void` | `undefined` | 点击关闭时的回调 |
| on-update:checked | `(value: boolean) => void` | `undefined` | 选择状态更改时的回调 |
diff --git a/src/tag/src/Tag.tsx b/src/tag/src/Tag.tsx
index 95b2401eeef..16e4ef2d083 100644
--- a/src/tag/src/Tag.tsx
+++ b/src/tag/src/Tag.tsx
@@ -44,6 +44,7 @@ export const tagProps = {
checked: Boolean,
checkable: Boolean,
strong: Boolean,
+ triggerClickOnClose: Boolean,
onClose: [Array, Function] as PropType void>>,
onMouseenter: Function as PropType<(e: MouseEvent) => void>,
onMouseleave: Function as PropType<(e: MouseEvent) => void>,
@@ -54,7 +55,6 @@ export const tagProps = {
type: Boolean,
default: true
},
- internalStopClickPropagation: Boolean,
// deprecated
onCheckedChange: {
type: Function as PropType<(checked: boolean) => void>,
@@ -118,7 +118,7 @@ export default defineComponent({
}
}
function handleCloseClick (e: MouseEvent): void {
- if (props.internalStopClickPropagation) {
+ if (!props.triggerClickOnClose) {
e.stopPropagation()
}
if (!props.disabled) {