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) {