Skip to content

Commit 7ccd7b3

Browse files
ngyyuusorangyyuusora
committed
fix(alert): close属性同步为closeBtn，close即将废弃
closes #3630
1 parent d4a3e88 commit 7ccd7b3

File tree

7 files changed

+48
-19
lines changed

7 files changed

+48
-19
lines changed

‎.vscode/settings.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,11 @@
2222
"editor.formatOnSave": true,
2323
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
2424
},
25-
"cSpell.words": ["tdesign", "popconfirm", "swiper", "cascader"]
25+
"cSpell.words": [
26+
"cascader",
27+
"popconfirm",
28+
"swiper",
29+
"tdesign",
30+
"vnode"
31+
]
2632
}

‎src/alert/__tests__/index.test.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ describe('Alert', () => {
2323
expect(wrapper.find('.t-alert__description').text()).toBe('text');
2424
});
2525

26-
it(':close', () => {
26+
it(':closeBtn', () => {
2727
const wrapper = mount({
2828
render() {
29-
return <Alert close>text</Alert>;
29+
return <Alert closeBtn>text</Alert>;
3030
},
3131
});
3232
const close = wrapper.find('.t-alert__close');
@@ -178,7 +178,7 @@ describe('Alert', () => {
178178
const wrapper = mount({
179179
render() {
180180
return (
181-
<Alert close onClose={fn}>
181+
<Alert closeBtn onClose={fn}>
182182
text
183183
</Alert>
184184
);

‎src/alert/alert.en-US.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### Alert Props
56

67
name | type | default | description | required
78
-- | -- | -- | -- | --
8-
close | String / Boolean / Slot / Function | false | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
9+
close | String / Boolean / Slot / Function | false | Deprecated, use closeBtn instead.Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
10+
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/blob/develop/src/common.ts) | N
911
default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
1012
icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
1113
maxLine | Number | 0 | \- | N
1214
message | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
1315
operation | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
14-
theme | String | info | options：success/info/warning/error | N
16+
theme | String | info | options: success/info/warning/error | N
1517
title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
1618
onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
1719
onClosed | Function | | Typescript：`(context: { e: TransitionEvent }) => void`<br/> | N

‎src/alert/alert.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### Alert Props
56

6-
名称 | 类型 | 默认值 | 说明 | 必传
7+
名称 | 类型 | 默认值 | 描述 | 必传
78
-- | -- | -- | -- | --
8-
close | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
9+
close | String / Boolean / Slot / Function | false | 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
10+
closeBtn | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
911
default | String / Slot / Function | - | 内容，同 message。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
1012
icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
1113
maxLine | Number | 0 | 内容显示最大行数，超出的内容会折叠收起，用户点击后再展开。值为 0 表示不折叠 | N

‎src/alert/alert.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
CloseIcon as TdCloseIcon,
88
} from 'tdesign-icons-vue';
99

10+
import log from '../_common/js/log/log';
1011
import { on, off, addClass } from '../utils/dom';
1112
import props from './props';
1213
import { renderTNodeJSX } from '../utils/render-tnode';
@@ -74,14 +75,23 @@ export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert'), getGlo
7475
renderClose(): VNode {
7576
const { CloseIcon } = this.useGlobalIcon({ CloseIcon: TdCloseIcon });
7677
let closeContent: ScopedSlotReturnValue = null;
77-
if (this.close === true || this.close === '') {
78+
// close属性变更为closeBtn过渡期使用，close废弃后可删除。（需兼容标签上直接写close和closeBtn的场景）
79+
const isUsingClose = Object.prototype.hasOwnProperty.call(this.$vnode.componentOptions.propsData || {}, 'close')
80+
|| this.$scopedSlots.close;
81+
const closeNode = isUsingClose ? this.close : this.closeBtn;
82+
if (isUsingClose) {
83+
log.warnOnce('TAlert', 'prop `close` is going to be deprecated, please use `closeBtn` instead.');
84+
}
85+
if (closeNode === true || closeNode === '') {
7886
closeContent = <CloseIcon />;
79-
} else if (typeof this.close === 'string') {
80-
closeContent = this.close;
81-
} else if (typeof this.close === 'function') {
82-
closeContent = this.close(this.$createElement);
87+
} else if (typeof closeNode === 'string') {
88+
closeContent = closeNode;
89+
} else if (typeof closeNode === 'function') {
90+
closeContent = closeNode(this.$createElement);
8391
} else {
84-
closeContent = this.$scopedSlots.close && this.$scopedSlots.close(null)[0];
92+
closeContent = isUsingClose ? this.$scopedSlots.close(null)[0] : renderTNodeJSX(this, 'close-btn');
93+
// todo 等待renderTNodeJSX修复prop为false时使用slot
94+
// closeContent = renderTNodeJSX(this, 'closeBtn');
8595
}
8696

8797
return closeContent ? (

‎src/alert/props.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,22 @@
22

33
/**
44
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5-
* updated at 2021-11-19 10:44:26
65
* */
76

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

1110
export default {
12-
/** 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */
11+
/** 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */
1312
close: {
1413
type: [String, Boolean, Function] as PropType<TdAlertProps['close']>,
1514
default: false,
1615
},
16+
/** 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */
17+
closeBtn: {
18+
type: [String, Boolean, Function] as PropType<TdAlertProps['closeBtn']>,
19+
default: false,
20+
},
1721
/** 内容，同 message */
1822
default: {
1923
type: [String, Function] as PropType<TdAlertProps['default']>,
@@ -40,6 +44,7 @@ export default {
4044
type: String as PropType<TdAlertProps['theme']>,
4145
default: 'info' as TdAlertProps['theme'],
4246
validator(val: TdAlertProps['theme']): boolean {
47+
if (!val) return true;
4348
return ['success', 'info', 'warning', 'error'].includes(val);
4449
},
4550
},

‎src/alert/type.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,21 @@
22

33
/**
44
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5-
* updated at 2021-11-19 10:44:26
65
* */
76

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

109
export interface TdAlertProps {
1110
/**
12-
* 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
11+
* 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
1312
* @default false
1413
*/
1514
close?: string | boolean | TNode;
15+
/**
16+
* 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
17+
* @default false
18+
*/
19+
closeBtn?: string | boolean | TNode;
1620
/**
1721
* 内容，同 message
1822
*/
@@ -51,4 +55,4 @@ export interface TdAlertProps {
5155
* 告警提示框关闭动画结束后触发
5256
*/
5357
onClosed?: (context: { e: TransitionEvent }) => void;
54-
};
58+
}

0 commit comments

Comments
 (0)