@tdesign/uniapp 0.7.3 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +1 -1
  3. package/dist/action-sheet/README.md +1 -1
  4. package/dist/action-sheet/action-sheet.vue +158 -150
  5. package/dist/action-sheet/props.ts +2 -2
  6. package/dist/action-sheet/type.ts +1 -1
  7. package/dist/avatar/avatar.vue +89 -87
  8. package/dist/avatar-group/avatar-group.vue +69 -67
  9. package/dist/back-top/back-top.vue +60 -58
  10. package/dist/badge/badge.vue +69 -59
  11. package/dist/button/button.vue +121 -116
  12. package/dist/button/props.ts +2 -2
  13. package/dist/button/type.ts +1 -1
  14. package/dist/calendar/calendar-header.vue +4 -4
  15. package/dist/calendar/calendar.vue +308 -297
  16. package/dist/calendar/template.vue +1 -1
  17. package/dist/cascader/README.en-US.md +2 -1
  18. package/dist/cascader/README.md +2 -1
  19. package/dist/cascader/cascader.vue +340 -328
  20. package/dist/cascader/props.ts +6 -1
  21. package/dist/cascader/type.ts +6 -0
  22. package/dist/cell/cell.vue +127 -121
  23. package/dist/cell-group/cell-group.vue +32 -30
  24. package/dist/check-tag/check-tag.vue +73 -71
  25. package/dist/checkbox/checkbox.vue +127 -127
  26. package/dist/checkbox/props.ts +6 -6
  27. package/dist/checkbox/type.ts +3 -3
  28. package/dist/checkbox-group/checkbox-group.vue +175 -173
  29. package/dist/checkbox-group/props.ts +6 -6
  30. package/dist/checkbox-group/type.ts +4 -4
  31. package/dist/col/col.vue +26 -24
  32. package/dist/collapse/collapse.vue +83 -81
  33. package/dist/collapse-panel/collapse-panel.vue +121 -119
  34. package/dist/collapse-panel/props.ts +4 -4
  35. package/dist/collapse-panel/type.ts +2 -2
  36. package/dist/color-picker/README.md +1 -1
  37. package/dist/color-picker/color-picker.vue +324 -322
  38. package/dist/color-picker/props.ts +2 -2
  39. package/dist/color-picker/template.vue +14 -10
  40. package/dist/common/common.ts +1 -0
  41. package/dist/common/style/theme/index.css +5 -5
  42. package/dist/common/utils.js +7 -2
  43. package/dist/common/validator.js +172 -0
  44. package/dist/config-provider/README.en-US.md +184 -0
  45. package/dist/config-provider/README.md +234 -0
  46. package/dist/config-provider/config-provider.vue +105 -0
  47. package/dist/config-provider/config-store.js +70 -0
  48. package/dist/config-provider/props.ts +16 -0
  49. package/dist/config-provider/reactive-state.js +39 -0
  50. package/dist/config-provider/type.ts +401 -0
  51. package/dist/config-provider/use-config.js +29 -0
  52. package/dist/config-provider/utils.js +29 -0
  53. package/dist/count-down/count-down.vue +98 -97
  54. package/dist/date-time-picker/date-time-picker.vue +410 -395
  55. package/dist/demo/demo.vue +1 -0
  56. package/dist/dialog/dialog.vue +175 -173
  57. package/dist/divider/divider.vue +38 -36
  58. package/dist/draggable/draggable.vue +60 -58
  59. package/dist/drawer/README.md +1 -1
  60. package/dist/drawer/drawer.vue +48 -46
  61. package/dist/dropdown-item/dropdown-item.vue +209 -207
  62. package/dist/dropdown-item/props.ts +4 -4
  63. package/dist/dropdown-item/type.ts +3 -3
  64. package/dist/dropdown-menu/dropdown-menu.vue +93 -99
  65. package/dist/empty/empty.vue +43 -42
  66. package/dist/fab/fab.vue +88 -86
  67. package/dist/footer/footer.vue +36 -34
  68. package/dist/form/README.en-US.md +17 -24
  69. package/dist/form/README.md +18 -25
  70. package/dist/form/form.css +1 -166
  71. package/dist/form/form.vue +251 -236
  72. package/dist/form/props.ts +2 -21
  73. package/dist/form/type.ts +7 -70
  74. package/dist/form-item/README.en-US.md +4 -5
  75. package/dist/form-item/README.md +4 -5
  76. package/dist/form-item/form-item.css +69 -96
  77. package/dist/form-item/form-item.vue +315 -336
  78. package/dist/form-item/form-model.ts +125 -173
  79. package/dist/form-item/props.ts +4 -17
  80. package/dist/form-item/type.ts +43 -1
  81. package/dist/grid/grid.vue +53 -51
  82. package/dist/grid-item/grid-item.vue +121 -119
  83. package/dist/guide/README.md +1 -1
  84. package/dist/guide/guide.vue +281 -277
  85. package/dist/icon/README.md +2 -4
  86. package/dist/icon/icon.vue +78 -76
  87. package/dist/image/README.md +1 -1
  88. package/dist/image/image.vue +103 -101
  89. package/dist/image-viewer/image-viewer.vue +160 -158
  90. package/dist/image-viewer/props.ts +2 -2
  91. package/dist/image-viewer/type.ts +1 -1
  92. package/dist/index.js +3 -0
  93. package/dist/indexes/indexes.vue +264 -267
  94. package/dist/indexes-anchor/indexes-anchor.vue +41 -41
  95. package/dist/input/input.vue +192 -192
  96. package/dist/input/props.ts +6 -6
  97. package/dist/input/type.ts +3 -3
  98. package/dist/link/link.vue +73 -71
  99. package/dist/loading/loading.vue +59 -59
  100. package/dist/locale/ar_KW.ts +157 -0
  101. package/dist/locale/en_US.ts +146 -0
  102. package/dist/locale/it_IT.ts +145 -0
  103. package/dist/locale/ja_JP.ts +132 -0
  104. package/dist/locale/ko_KR.ts +132 -0
  105. package/dist/locale/ru_RU.ts +157 -0
  106. package/dist/locale/zh_CN.ts +133 -0
  107. package/dist/locale/zh_TW.ts +132 -0
  108. package/dist/message/message.vue +181 -173
  109. package/dist/message/props.ts +2 -2
  110. package/dist/message/type.ts +1 -1
  111. package/dist/message-item/message-item.vue +192 -184
  112. package/dist/mixins/using-config.js +39 -0
  113. package/dist/navbar/navbar.vue +201 -199
  114. package/dist/notice-bar/notice-bar.vue +175 -171
  115. package/dist/notice-bar/props.ts +2 -2
  116. package/dist/notice-bar/type.ts +1 -1
  117. package/dist/npm/dayjs/esm/locale/ar.js +81 -0
  118. package/dist/npm/dayjs/esm/locale/it.js +39 -0
  119. package/dist/overlay/overlay.vue +50 -48
  120. package/dist/picker/picker.vue +168 -161
  121. package/dist/picker-item/picker-item.vue +269 -269
  122. package/dist/popover/README.md +1 -1
  123. package/dist/popover/popover.vue +262 -261
  124. package/dist/popover/props.ts +4 -4
  125. package/dist/popover/type.ts +2 -2
  126. package/dist/popup/popup.vue +46 -45
  127. package/dist/progress/README.md +1 -1
  128. package/dist/progress/progress.vue +76 -76
  129. package/dist/pull-down-refresh/props.ts +2 -2
  130. package/dist/pull-down-refresh/pull-down-refresh.vue +240 -234
  131. package/dist/pull-down-refresh/type.ts +1 -1
  132. package/dist/qrcode/README.md +1 -1
  133. package/dist/qrcode/components/qrcode-canvas/qrcode-canvas.vue +340 -338
  134. package/dist/qrcode/components/qrcode-status/qrcode-status.vue +6 -6
  135. package/dist/qrcode/qrcode.vue +93 -87
  136. package/dist/radio/props.ts +6 -6
  137. package/dist/radio/radio.vue +118 -120
  138. package/dist/radio/type.ts +3 -3
  139. package/dist/radio-group/props.ts +4 -4
  140. package/dist/radio-group/radio-group.vue +136 -134
  141. package/dist/radio-group/type.ts +4 -4
  142. package/dist/rate/computed.js +2 -2
  143. package/dist/rate/props.ts +4 -4
  144. package/dist/rate/rate.vue +155 -154
  145. package/dist/rate/type.ts +2 -2
  146. package/dist/result/result.vue +41 -39
  147. package/dist/row/row.vue +38 -36
  148. package/dist/scroll-view/scroll-view.vue +24 -22
  149. package/dist/search/props.ts +2 -2
  150. package/dist/search/search.vue +127 -125
  151. package/dist/search/type.ts +1 -1
  152. package/dist/side-bar/side-bar.vue +57 -55
  153. package/dist/side-bar-item/side-bar-item.vue +86 -86
  154. package/dist/skeleton/skeleton.vue +126 -124
  155. package/dist/slider/README.md +1 -1
  156. package/dist/slider/props.ts +2 -2
  157. package/dist/slider/slider.vue +457 -457
  158. package/dist/slider/type.ts +1 -1
  159. package/dist/step-item/step-item.vue +77 -75
  160. package/dist/stepper/props.ts +2 -2
  161. package/dist/stepper/stepper.vue +168 -149
  162. package/dist/stepper/type.ts +1 -1
  163. package/dist/steps/props.ts +2 -2
  164. package/dist/steps/steps.vue +83 -81
  165. package/dist/steps/type.ts +1 -1
  166. package/dist/sticky/sticky.vue +104 -102
  167. package/dist/swipe-cell/swipe-cell.vue +91 -89
  168. package/dist/swiper/README.md +1 -1
  169. package/dist/swiper/swiper.vue +91 -89
  170. package/dist/swiper-nav/swiper-nav.vue +38 -36
  171. package/dist/switch/props.ts +2 -2
  172. package/dist/switch/switch.vue +62 -62
  173. package/dist/switch/type.ts +1 -1
  174. package/dist/tab-bar/tab-bar.vue +88 -86
  175. package/dist/tab-bar-item/tab-bar-item.vue +85 -82
  176. package/dist/tab-panel/tab-panel.vue +66 -64
  177. package/dist/tabs/tabs.vue +294 -287
  178. package/dist/tag/tag.vue +79 -77
  179. package/dist/textarea/props.ts +6 -6
  180. package/dist/textarea/textarea.vue +127 -126
  181. package/dist/textarea/type.ts +3 -3
  182. package/dist/toast/toast.vue +107 -106
  183. package/dist/transition/transition.vue +30 -28
  184. package/dist/tree-select/tree-select.vue +151 -151
  185. package/dist/types/config-provider.d.ts +7 -0
  186. package/dist/types/index.d.ts +2 -0
  187. package/dist/types/popover.d.ts +7 -0
  188. package/dist/upload/README.en-US.md +13 -14
  189. package/dist/upload/README.md +11 -12
  190. package/dist/upload/props.ts +2 -4
  191. package/dist/upload/type.ts +12 -11
  192. package/dist/upload/upload.css +1 -1
  193. package/dist/upload/upload.vue +672 -512
  194. package/dist/watermark/watermark.vue +151 -149
  195. package/global.d.ts +2 -0
  196. package/package.json +15 -3
  197. package/dist/form/form-item-props.ts +0 -56
@@ -0,0 +1,132 @@
1
+ /* eslint-disable no-template-curly-in-string */
2
+ // 文件有效,为国际化做准备
3
+ import '../npm/dayjs/esm/locale/zh-tw';
4
+
5
+ export default {
6
+ actionSheet: {
7
+ cancel: '取消',
8
+ },
9
+ calendar: {
10
+ title: '請選擇日期',
11
+ confirm: '確認',
12
+ weekdays: ['日', '一', '二', '三', '四', '五', '六'],
13
+ monthTitle: '{year} 年 {month}',
14
+ months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
15
+ },
16
+ cascader: {
17
+ title: '標題',
18
+ placeholder: '選擇選項',
19
+ },
20
+ dropdownMenu: {
21
+ reset: '重置',
22
+ confirm: '確定',
23
+ },
24
+ dateTimePicker: {
25
+ dayjsLocale: 'zh-tw',
26
+ title: '選擇時間',
27
+ cancel: '取消',
28
+ confirm: '確定',
29
+ format: 'YYYY-MM-DD',
30
+ months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
31
+ yearLabel: '年',
32
+ monthLabel: '月',
33
+ dateLabel: '日',
34
+ hourLabel: '時',
35
+ minuteLabel: '分',
36
+ secondLabel: '秒',
37
+ },
38
+ form: {
39
+ errorMessage: {
40
+ date: '請輸入正確的${name}',
41
+ url: '請輸入正確的${name}',
42
+ whitespace: '${name}不能為空',
43
+ required: '${name}必填',
44
+ max: '${name}字符長度不能超過 ${validate} 個字符,一個中文等於兩個字符',
45
+ min: '${name}字符長度不能少於 ${validate} 個字符,一個中文等於兩個字符',
46
+ len: '${name}字符長度必須是 ${validate}',
47
+ enum: '${name}只能是${validate}等',
48
+ idcard: '請輸入正確的${name}',
49
+ telnumber: '請輸入正確的${name}',
50
+ pattern: '請輸入正確的${name}',
51
+ validator: '${name}不符合要求',
52
+ boolean: '${name}數據類型必須是布林類型',
53
+ number: '${name}必須是數字',
54
+ },
55
+ colonText: ':',
56
+ },
57
+ picker: {
58
+ cancel: '取消',
59
+ confirm: '確認',
60
+ },
61
+ pullDownRefresh: {
62
+ loadingTexts: ['下拉刷新', '鬆手刷新', '正在刷新', '刷新完成'],
63
+ },
64
+ rate: {
65
+ texts: ['極差', '失望', '一般', '滿意', '驚喜'],
66
+ valueText: '{value} 分',
67
+ noValueText: '未評分',
68
+ },
69
+ tabBar: {
70
+ newsAriaLabel: '有新消息',
71
+ moreNewsAriaLabel: '有很多消息',
72
+ haveMoreNewsAriaLabel: '有 {value}+ 條消息',
73
+ haveNewsAriaLabel: '有 {value} 條消息',
74
+ },
75
+ table: {
76
+ empty: '暫無數據',
77
+ },
78
+ list: {
79
+ loading: '加載中...',
80
+ loadingMoreText: '點擊加載更多',
81
+ pulling: '下拉即可刷新...',
82
+ loosing: '釋放即可刷新...',
83
+ success: '刷新成功',
84
+ },
85
+ upload: {
86
+ progress: {
87
+ uploadingText: '上傳中...',
88
+ waitingText: '待上傳',
89
+ failText: '上傳失敗',
90
+ successText: '上傳成功',
91
+ },
92
+ },
93
+ guide: {
94
+ next: '下一步',
95
+ skip: '跳過',
96
+ finish: '完成',
97
+ back: '返回',
98
+ },
99
+ qrcode: {
100
+ expiredText: '二維碼過期',
101
+ refreshText: '點擊刷新',
102
+ scannedText: '已掃描',
103
+ },
104
+ attachments: {
105
+ status: {
106
+ pending: '上傳中...',
107
+ fail: '上傳失敗',
108
+ },
109
+ },
110
+ chatActionbar: {
111
+ actionBar: {
112
+ replay: '刷新',
113
+ copy: '複製',
114
+ good: '點讚',
115
+ bad: '點踩',
116
+ share: '分享',
117
+ quote: '引用',
118
+ },
119
+ },
120
+ chatSender: {
121
+ placeholder: '請輸入消息...',
122
+ sendText: '發送',
123
+ stopText: '停止',
124
+ },
125
+ chatThinking: {
126
+ status: {
127
+ pending: '正在思考中...',
128
+ complete: '已完成思考',
129
+ stop: '已停止思考',
130
+ },
131
+ },
132
+ };
@@ -1,12 +1,12 @@
1
1
  <template>
2
2
  <view>
3
- <TMessageItem
3
+ <t-message-item
4
4
  v-for="(item) in messageList"
5
5
  :key="item.id"
6
6
  :ref="item.id"
7
- @close-btn-click="handleClose($event, { tagId: item.id })"
8
- @link-click="handleLinkClick($event, { tagId: item.id })"
9
- @duration-end="handleDurationEnd($event, { tagId: item.id })"
7
+ @close-btn-click="(e) => handleClose(e, { tagId: item.id })"
8
+ @link-click="(e) => handleLinkClick(e, { tagId: item.id })"
9
+ @duration-end="(e) => handleDurationEnd(e, { tagId: item.id })"
10
10
  >
11
11
  <template #icon>
12
12
  <slot
@@ -29,7 +29,7 @@
29
29
  name="close-btn"
30
30
  />
31
31
  </template>
32
- </TMessageItem>
32
+ </t-message-item>
33
33
  </view>
34
34
  </template>
35
35
 
@@ -45,231 +45,239 @@ import { unitConvert } from '../common/utils';
45
45
  const SHOW_DURATION = 400;
46
46
  const name = `${prefix}-message`;
47
47
 
48
- export default uniComponent({
49
- name,
50
- options: {
51
- styleIsolation: 'shared',
52
- },
48
+ export default {
53
49
  components: {
54
50
  TMessageItem,
55
51
  },
56
- props: {
57
- ...props,
58
- },
59
- data() {
60
- return {
61
- prefix,
62
- classPrefix: name,
63
- messageList: [],
64
- instances: [],
65
- index: 0,
66
- };
67
- },
68
- watch: {
69
- visible: {
70
- handler(value) {
71
- if (value) {
72
- const data = Object.keys(props).reduce((acc, key) => ({
73
- ...acc,
74
- [key]: this[key],
75
- }), {});
52
+ ...uniComponent({
53
+ name,
54
+ options: {
55
+ styleIsolation: 'shared',
56
+ },
57
+ props: {
58
+ ...props,
59
+ },
60
+ data() {
61
+ return {
62
+ prefix,
63
+ classPrefix: name,
64
+ messageList: [],
65
+ index: 0,
66
+ };
67
+ },
68
+ watch: {
69
+ visible: {
70
+ handler(value) {
71
+ if (value) {
72
+ const data = Object.keys(props).reduce((acc, key) => ({
73
+ ...acc,
74
+ [key]: this[key],
75
+ }), {});
76
76
 
77
- this.setMessage(data, this.theme);
78
- } else {
79
- this.messageList = [];
80
- }
77
+ this.setMessage(data, this.theme);
78
+ } else {
79
+ this.messageList = [];
80
+ }
81
+ },
82
+ immediate: true,
81
83
  },
82
- immediate: true,
83
84
  },
84
- },
85
85
 
86
- pageLifetimes: {
87
- show() {
88
- this.hideAll();
86
+ pageLifetimes: {
87
+ show() {
88
+ this.hideAll();
89
+ },
89
90
  },
90
- },
91
91
 
92
- mounted() {
93
- },
92
+ created() {
93
+ this.instances = [];
94
+ },
95
+ mounted() {
96
+ },
94
97
 
95
- methods: {
98
+ methods: {
96
99
  /**
97
100
  * 设置消息信息
98
101
  * @param msg
99
102
  * @param theme
100
103
  */
101
- setMessage(msg, theme = MessageType.info) {
102
- let id = `${name}_${this.index}`;
103
- if (msg.single) {
104
+ setMessage(msg, theme = MessageType.info) {
105
+ if (!this.instances) {
106
+ this.instances = [];
107
+ }
108
+
109
+ let id = `${name}_${this.index}`;
110
+ if (msg.single) {
104
111
  // 不能与外层的 ref 相同,否则抖音小程序报错
105
- id = `${name}_inner`;
106
- }
107
- const gap = unitConvert(msg.gap || this.gap);
108
- const msgObj = {
109
- ...msg,
110
- theme,
111
- id,
112
- gap,
113
- };
114
- const instanceIndex = this.instances.findIndex(x => x.id === id);
115
- if (instanceIndex < 0) {
116
- this.addMessage(msgObj);
117
- } else {
118
- // 更新消息
119
- const instance = this.instances[instanceIndex];
120
- const offsetHeight = this.getOffsetHeight(instanceIndex);
121
- instance.resetData(() => {
122
- Object.keys(msgObj).forEach((key) => {
123
- instance[key] = msgObj[key];
124
- });
125
- setTimeout(() => {
126
- instance.show.call(instance, offsetHeight);
112
+ id = `${name}_inner`;
113
+ }
114
+ const gap = unitConvert(msg.gap || this.gap);
115
+ const msgObj = {
116
+ ...msg,
117
+ theme,
118
+ id,
119
+ gap,
120
+ };
121
+ const instanceIndex = this.instances.findIndex(x => x.id === id);
122
+ if (instanceIndex < 0) {
123
+ this.addMessage(msgObj);
124
+ } else {
125
+ // 更新消息
126
+ const instance = this.instances[instanceIndex];
127
+ const offsetHeight = this.getOffsetHeight(instanceIndex);
128
+ instance.resetData(() => {
129
+ Object.keys(msgObj).forEach((key) => {
130
+ instance[key] = msgObj[key];
131
+ });
132
+ setTimeout(() => {
133
+ instance.show.call(instance, offsetHeight);
134
+ });
135
+ instance.onHide = () => {
136
+ this.close(id);
137
+ };
127
138
  });
128
- instance.onHide = () => {
129
- this.close(id);
130
- };
131
- });
132
- }
133
- },
139
+ }
140
+ },
134
141
 
135
- /**
142
+ /**
136
143
  * 新增消息
137
144
  * @param msgObj
138
145
  */
139
- addMessage(msgObj) {
140
- const list = [...this.messageList, { id: msgObj.id }];
141
- this.messageList = list;
146
+ addMessage(msgObj) {
147
+ const list = [...this.messageList, { id: msgObj.id }];
148
+ this.messageList = list;
142
149
 
143
- setTimeout(() => {
144
- const offsetHeight = this.getOffsetHeight();
145
- const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
146
- if (this.instances) {
147
- this.instances.push(instance);
148
- this.index += 1;
149
- }
150
- }, 33);
151
- },
150
+ setTimeout(() => {
151
+ const offsetHeight = this.getOffsetHeight();
152
+ const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
153
+ if (this.instances) {
154
+ this.instances.push(instance);
155
+ this.index += 1;
156
+ }
157
+ }, 33);
158
+ },
152
159
 
153
- /**
160
+ /**
154
161
  * 获取消息显示top偏移距离
155
162
  * @param index
156
163
  * @returns
157
164
  */
158
- getOffsetHeight(index = -1) {
159
- let offsetHeight = 0;
160
- let len = index;
161
- if (len === -1 || len > this.instances.length) {
162
- len = this.instances.length;
163
- }
164
- for (let i = 0; i < len; i += 1) {
165
- const instance = this.instances[i];
166
- offsetHeight += instance.height + instance.gap;
167
- }
168
- return offsetHeight;
169
- },
165
+ getOffsetHeight(index = -1) {
166
+ let offsetHeight = 0;
167
+ let len = index;
168
+ if (len === -1 || len > this.instances.length) {
169
+ len = this.instances.length;
170
+ }
171
+ for (let i = 0; i < len; i += 1) {
172
+ const instance = this.instances[i];
173
+ offsetHeight += instance.height + instance.gap;
174
+ }
175
+ return offsetHeight;
176
+ },
170
177
 
171
- /**
178
+ /**
172
179
  * 新增消息显示
173
180
  * @param options
174
181
  * @param id
175
182
  * @param offsetHeight
176
183
  * @returns
177
184
  */
178
- showMessageItem(options, id, offsetHeight) {
179
- let instance = this.$refs[`${id}`];
180
- if (Array.isArray(instance)) {
181
- instance = instance[0];
182
- }
185
+ showMessageItem(options, id, offsetHeight) {
186
+ let instance = this.$refs[`${id}`];
187
+ if (Array.isArray(instance)) {
188
+ instance = instance[0];
189
+ }
183
190
 
184
- if (instance) {
185
- instance.resetData(() => {
186
- Object.keys(options).forEach((key) => {
187
- instance[key] = options[key];
188
- });
189
- setTimeout(() => {
190
- instance.show.call(instance, offsetHeight);
191
+ if (instance) {
192
+ instance.resetData(() => {
193
+ Object.keys(options).forEach((key) => {
194
+ instance[key] = options[key];
195
+ });
196
+ setTimeout(() => {
197
+ instance.show.call(instance, offsetHeight);
198
+ });
199
+ instance.onHide = () => {
200
+ this.close(id);
201
+ };
191
202
  });
192
- instance.onHide = () => {
193
- this.close(id);
194
- };
195
- });
196
203
 
197
- return instance;
198
- }
199
- console.error('未找到组件,请确认 selector && context 是否正确');
200
- },
204
+ return instance;
205
+ }
206
+ console.error('未找到组件,请确认 selector && context 是否正确');
207
+ },
201
208
 
202
- close(id) {
203
- setTimeout(() => {
204
- this.removeMsg(id);
205
- }, SHOW_DURATION);
206
- this.removeInstance(id);
207
- },
209
+ close(id) {
210
+ setTimeout(() => {
211
+ this.removeMsg(id);
212
+ }, SHOW_DURATION);
213
+ this.removeInstance(id);
214
+ },
208
215
 
209
- /**
216
+ /**
210
217
  * 移除指定消息,id为空则删除全部消息
211
218
  * @param id
212
219
  */
213
- hide(id) {
214
- if (!id) {
215
- this.hideAll();
216
- }
217
- const instance = this.instances.find(x => x.id === id);
218
- if (instance) {
219
- instance.hide();
220
- }
221
- },
220
+ hide(id) {
221
+ if (!id) {
222
+ this.hideAll();
223
+ }
224
+ const instance = this.instances.find(x => x.id === id);
225
+ if (instance) {
226
+ instance.hide();
227
+ }
228
+ },
222
229
 
223
- /**
230
+ /**
224
231
  * 移除全部消息
225
232
  */
226
- hideAll() {
227
- // 消息移除后也会移除instance,下标不用增加,直至全部删除
228
- for (let i = 0; i < this.instances.length;) {
229
- const instance = this.instances[i];
230
- instance.hide();
231
- }
232
- },
233
+ hideAll() {
234
+ // 消息移除后也会移除instance,下标不用增加,直至全部删除
235
+ for (let i = 0; i < this.instances.length;) {
236
+ const instance = this.instances[i];
237
+ instance.hide();
238
+ }
239
+ },
233
240
 
234
- /**
241
+ /**
235
242
  * 移除message实例
236
243
  */
237
- removeInstance(id) {
238
- const index = this.instances.findIndex(x => x.id === id);
239
- if (index < 0) return;
240
- const instance = this.instances[index];
241
- const removedHeight = instance.height;
242
- this.instances.splice(index, 1);
243
- for (let i = index; i < this.instances.length; i += 1) {
244
- const instance = this.instances[i];
245
- instance.wrapTop = instance.wrapTop - removedHeight - instance.gap;
246
- }
247
- },
244
+ removeInstance(id) {
245
+ const index = this.instances.findIndex(x => x.id === id);
246
+ if (index < 0) return;
247
+ const instance = this.instances[index];
248
+ const removedHeight = instance.height;
249
+ this.instances.splice(index, 1);
250
+ for (let i = index; i < this.instances.length; i += 1) {
251
+ const instance = this.instances[i];
252
+ instance.wrapTop = instance.wrapTop - removedHeight - instance.gap;
253
+ }
254
+ },
248
255
 
249
- /**
256
+ /**
250
257
  * 移除页面元素
251
258
  * @param id
252
259
  */
253
- removeMsg(id) {
254
- this.messageList = this.messageList.filter(item => item.id !== id);
255
- // #ifdef VUE2
256
- this.$set(this, 'messageList', this.messageList);
260
+ removeMsg(id) {
261
+ this.messageList = this.messageList.filter(item => item.id !== id);
262
+ // #ifdef VUE2
263
+ this.$set(this, 'messageList', this.messageList);
257
264
  // #endif
258
- },
265
+ },
259
266
 
260
- handleClose(e) {
261
- this.$emit('close-btn-click', { e });
262
- },
267
+ handleClose(e) {
268
+ this.$emit('close-btn-click', { e });
269
+ },
263
270
 
264
- handleLinkClick(e) {
265
- this.$emit('link-click', { e });
266
- },
271
+ handleLinkClick(e) {
272
+ this.$emit('link-click', { e });
273
+ },
267
274
 
268
- handleDurationEnd(e) {
269
- this.$emit('duration-end', { e });
275
+ handleDurationEnd(e) {
276
+ this.$emit('duration-end', { e });
277
+ },
270
278
  },
271
- },
272
- });
279
+ }),
280
+ };
273
281
  </script>
274
282
  <style scoped>
275
283
  </style>
@@ -68,8 +68,8 @@ export default {
68
68
  },
69
69
  /** 是否显示,隐藏时默认销毁组件 */
70
70
  visible: {
71
- type: Boolean,
72
- default: undefined,
71
+ type: [Boolean, null],
72
+ default: null as TdMessageProps['visible'],
73
73
  },
74
74
  /** 是否显示,隐藏时默认销毁组件,非受控属性 */
75
75
  defaultVisible: Boolean,
@@ -61,7 +61,7 @@ export interface TdMessageProps {
61
61
  * 是否显示,隐藏时默认销毁组件
62
62
  * @default false
63
63
  */
64
- visible?: boolean;
64
+ visible?: boolean | null;
65
65
  /**
66
66
  * 是否显示,隐藏时默认销毁组件,非受控属性
67
67
  * @default false