Skip to content

fix(alert): add closeBtn API and set close as deprecated #5621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 26, 2025
Merged

fix(alert): add closeBtn API and set close as deprecated #5621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eaef65c
fix(alert): close属性同步为closeBtn，close即将废弃
ngyyuusora Jun 19, 2025
0aca3d8
chore: fix typo
uyarn Jun 23, 2025
fc07979
chore: stash changelog [ci skip]
tdesign-bot Jun 26, 2025
79d8c50
chore: stash changelog [ci skip]
tdesign-bot Jun 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/components/alert/__tests__/alert.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ describe('Alert', () => {
expect(wrapper.find('.t-alert__description').text()).toBe('text');
});

it(':close', () => {
const wrapper = mount(() => <Alert close>text</Alert>);
it(':closeBtn', () => {
const wrapper = mount(() => <Alert closeBtn>text</Alert>);
const close = wrapper.find('.t-alert__close');
expect(close.exists()).toBeTruthy();
expect(wrapper.findComponent(CloseIcon).exists()).toBeTruthy();
Expand Down Expand Up @@ -116,7 +116,7 @@ describe('Alert', () => {
it(':onClose', async () => {
const fn = vi.fn();
const wrapper = mount(() => (
<Alert close onClose={fn}>
<Alert closeBtn onClose={fn}>
text
</Alert>
));
Expand Down
5 changes: 3 additions & 2 deletions packages/components/alert/alert.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@

name | type | default | description | required
-- | -- | -- | -- | --
close | String / Boolean / Slot / Function | false | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
close | String / Boolean / Slot / Function | false | Deprecated, use closeBtn instead. Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
closeBtn | String / Boolean / Slot / Function | false | Close button. Value "true" show the close button. Value "False" hide close button. Value type string display as is. Use TNode to custom the close trigger. Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
maxLine | Number | 0 | \- | N
message | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
operation | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
theme | String | info | options：success/info/warning/error | N
theme | String | info | options: success/info/warning/error | N
title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onClosed | Function | | Typescript：`(context: { e: TransitionEvent }) => void`<br/> | N
Expand Down
6 changes: 4 additions & 2 deletions packages/components/alert/alert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
:: BASE_DOC ::

## API

### Alert Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
close | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
close | String / Boolean / Slot / Function | false | 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
closeBtn | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
default | String / Slot / Function | - | 内容，同 message。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
maxLine | Number | 0 | 内容显示最大行数，超出的内容会折叠收起，用户点击后再展开。值为 0 表示不折叠 | N
Expand Down
9 changes: 8 additions & 1 deletion packages/components/alert/alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { on, off, addClass } from '@tdesign/shared-utils';
import props from './props';
import { SlotReturnValue } from '../common';
import { useIcon, useConfig, useTNodeJSX, useGlobalIcon, usePrefixClass } from '@tdesign/shared-hooks';
import log from '@tdesign/common-js/log/log';

export default defineComponent({
name: 'TAlert',
Expand Down Expand Up @@ -54,7 +55,13 @@ export default defineComponent({
};

const renderClose = () => {
const { close } = props;
// close属性变更为closeBtn过渡期使用，close废弃后可删除。（需兼容标签上直接写close和closeBtn的场景）
const { closeBtn } = props;
const isUsingClose = props.close || typeof props.close === 'string';
const close = isUsingClose ? props.close : closeBtn;
if (isUsingClose) {
log.warnOnce('TAlert', 'prop `close` is going to be deprecated, please use `closeBtn` instead.');
}
let closeContent = null;
if (close === true || close === '') {
closeContent = <CloseIcon />;
Expand Down
11 changes: 8 additions & 3 deletions packages/components/alert/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,21 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-12-12 19:17:30
* */

import { TdAlertProps } from './type';
import { PropType } from 'vue';

export default {
/** 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */
/** 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */
close: {
type: [String, Boolean, Function] as PropType<TdAlertProps['close']>,
default: false,
default: false as TdAlertProps['close'],
},
/** 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */
closeBtn: {
type: [String, Boolean, Function] as PropType<TdAlertProps['closeBtn']>,
default: false as TdAlertProps['closeBtn'],
},
/** 内容，同 message */
default: {
Expand Down Expand Up @@ -40,6 +44,7 @@ export default {
type: String as PropType<TdAlertProps['theme']>,
default: 'info' as TdAlertProps['theme'],
validator(val: TdAlertProps['theme']): boolean {
if (!val) return true;
return ['success', 'info', 'warning', 'error'].includes(val);
},
},
Expand Down
8 changes: 6 additions & 2 deletions packages/components/alert/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,21 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-12-12 19:17:30
* */

import { TNode } from '../common';

export interface TdAlertProps {
/**
* 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
* 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
* @default false
*/
close?: string | boolean | TNode;
/**
* 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
* @default false
*/
closeBtn?: string | boolean | TNode;
/**
* 内容，同 message
*/
Expand Down
6 changes: 6 additions & 0 deletions packages/tdesign-vue-next/.changelog/pr-5621.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
pr_number: 5621
contributor: ngyyuusora
---

- feat(Alert): 新增 `closeBtn` API，与其他组件保持一致，`close` 将在未来版本废弃，请尽快调整为`closeBtn` 使用 @ngyyuusora ([#5621](https://github.com/Tencent/tdesign-vue-next/pull/5621))