@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.
- package/CHANGELOG.md +23 -0
- package/README.md +1 -1
- package/dist/action-sheet/README.md +1 -1
- package/dist/action-sheet/action-sheet.vue +158 -150
- package/dist/action-sheet/props.ts +2 -2
- package/dist/action-sheet/type.ts +1 -1
- package/dist/avatar/avatar.vue +89 -87
- package/dist/avatar-group/avatar-group.vue +69 -67
- package/dist/back-top/back-top.vue +60 -58
- package/dist/badge/badge.vue +69 -59
- package/dist/button/button.vue +121 -116
- package/dist/button/props.ts +2 -2
- package/dist/button/type.ts +1 -1
- package/dist/calendar/calendar-header.vue +4 -4
- package/dist/calendar/calendar.vue +308 -297
- package/dist/calendar/template.vue +1 -1
- package/dist/cascader/README.en-US.md +2 -1
- package/dist/cascader/README.md +2 -1
- package/dist/cascader/cascader.vue +340 -328
- package/dist/cascader/props.ts +6 -1
- package/dist/cascader/type.ts +6 -0
- package/dist/cell/cell.vue +127 -121
- package/dist/cell-group/cell-group.vue +32 -30
- package/dist/check-tag/check-tag.vue +73 -71
- package/dist/checkbox/checkbox.vue +127 -127
- package/dist/checkbox/props.ts +6 -6
- package/dist/checkbox/type.ts +3 -3
- package/dist/checkbox-group/checkbox-group.vue +175 -173
- package/dist/checkbox-group/props.ts +6 -6
- package/dist/checkbox-group/type.ts +4 -4
- package/dist/col/col.vue +26 -24
- package/dist/collapse/collapse.vue +83 -81
- package/dist/collapse-panel/collapse-panel.vue +121 -119
- package/dist/collapse-panel/props.ts +4 -4
- package/dist/collapse-panel/type.ts +2 -2
- package/dist/color-picker/README.md +1 -1
- package/dist/color-picker/color-picker.vue +324 -322
- package/dist/color-picker/props.ts +2 -2
- package/dist/color-picker/template.vue +14 -10
- package/dist/common/common.ts +1 -0
- package/dist/common/style/theme/index.css +5 -5
- package/dist/common/utils.js +7 -2
- package/dist/common/validator.js +172 -0
- package/dist/config-provider/README.en-US.md +184 -0
- package/dist/config-provider/README.md +234 -0
- package/dist/config-provider/config-provider.vue +105 -0
- package/dist/config-provider/config-store.js +70 -0
- package/dist/config-provider/props.ts +16 -0
- package/dist/config-provider/reactive-state.js +39 -0
- package/dist/config-provider/type.ts +401 -0
- package/dist/config-provider/use-config.js +29 -0
- package/dist/config-provider/utils.js +29 -0
- package/dist/count-down/count-down.vue +98 -97
- package/dist/date-time-picker/date-time-picker.vue +410 -395
- package/dist/demo/demo.vue +1 -0
- package/dist/dialog/dialog.vue +175 -173
- package/dist/divider/divider.vue +38 -36
- package/dist/draggable/draggable.vue +60 -58
- package/dist/drawer/README.md +1 -1
- package/dist/drawer/drawer.vue +48 -46
- package/dist/dropdown-item/dropdown-item.vue +209 -207
- package/dist/dropdown-item/props.ts +4 -4
- package/dist/dropdown-item/type.ts +3 -3
- package/dist/dropdown-menu/dropdown-menu.vue +93 -99
- package/dist/empty/empty.vue +43 -42
- package/dist/fab/fab.vue +88 -86
- package/dist/footer/footer.vue +36 -34
- package/dist/form/README.en-US.md +17 -24
- package/dist/form/README.md +18 -25
- package/dist/form/form.css +1 -166
- package/dist/form/form.vue +251 -236
- package/dist/form/props.ts +2 -21
- package/dist/form/type.ts +7 -70
- package/dist/form-item/README.en-US.md +4 -5
- package/dist/form-item/README.md +4 -5
- package/dist/form-item/form-item.css +69 -96
- package/dist/form-item/form-item.vue +315 -336
- package/dist/form-item/form-model.ts +125 -173
- package/dist/form-item/props.ts +4 -17
- package/dist/form-item/type.ts +43 -1
- package/dist/grid/grid.vue +53 -51
- package/dist/grid-item/grid-item.vue +121 -119
- package/dist/guide/README.md +1 -1
- package/dist/guide/guide.vue +281 -277
- package/dist/icon/README.md +2 -4
- package/dist/icon/icon.vue +78 -76
- package/dist/image/README.md +1 -1
- package/dist/image/image.vue +103 -101
- package/dist/image-viewer/image-viewer.vue +160 -158
- package/dist/image-viewer/props.ts +2 -2
- package/dist/image-viewer/type.ts +1 -1
- package/dist/index.js +3 -0
- package/dist/indexes/indexes.vue +264 -267
- package/dist/indexes-anchor/indexes-anchor.vue +41 -41
- package/dist/input/input.vue +192 -192
- package/dist/input/props.ts +6 -6
- package/dist/input/type.ts +3 -3
- package/dist/link/link.vue +73 -71
- package/dist/loading/loading.vue +59 -59
- package/dist/locale/ar_KW.ts +157 -0
- package/dist/locale/en_US.ts +146 -0
- package/dist/locale/it_IT.ts +145 -0
- package/dist/locale/ja_JP.ts +132 -0
- package/dist/locale/ko_KR.ts +132 -0
- package/dist/locale/ru_RU.ts +157 -0
- package/dist/locale/zh_CN.ts +133 -0
- package/dist/locale/zh_TW.ts +132 -0
- package/dist/message/message.vue +181 -173
- package/dist/message/props.ts +2 -2
- package/dist/message/type.ts +1 -1
- package/dist/message-item/message-item.vue +192 -184
- package/dist/mixins/using-config.js +39 -0
- package/dist/navbar/navbar.vue +201 -199
- package/dist/notice-bar/notice-bar.vue +175 -171
- package/dist/notice-bar/props.ts +2 -2
- package/dist/notice-bar/type.ts +1 -1
- package/dist/npm/dayjs/esm/locale/ar.js +81 -0
- package/dist/npm/dayjs/esm/locale/it.js +39 -0
- package/dist/overlay/overlay.vue +50 -48
- package/dist/picker/picker.vue +168 -161
- package/dist/picker-item/picker-item.vue +269 -269
- package/dist/popover/README.md +1 -1
- package/dist/popover/popover.vue +262 -261
- package/dist/popover/props.ts +4 -4
- package/dist/popover/type.ts +2 -2
- package/dist/popup/popup.vue +46 -45
- package/dist/progress/README.md +1 -1
- package/dist/progress/progress.vue +76 -76
- package/dist/pull-down-refresh/props.ts +2 -2
- package/dist/pull-down-refresh/pull-down-refresh.vue +240 -234
- package/dist/pull-down-refresh/type.ts +1 -1
- package/dist/qrcode/README.md +1 -1
- package/dist/qrcode/components/qrcode-canvas/qrcode-canvas.vue +340 -338
- package/dist/qrcode/components/qrcode-status/qrcode-status.vue +6 -6
- package/dist/qrcode/qrcode.vue +93 -87
- package/dist/radio/props.ts +6 -6
- package/dist/radio/radio.vue +118 -120
- package/dist/radio/type.ts +3 -3
- package/dist/radio-group/props.ts +4 -4
- package/dist/radio-group/radio-group.vue +136 -134
- package/dist/radio-group/type.ts +4 -4
- package/dist/rate/computed.js +2 -2
- package/dist/rate/props.ts +4 -4
- package/dist/rate/rate.vue +155 -154
- package/dist/rate/type.ts +2 -2
- package/dist/result/result.vue +41 -39
- package/dist/row/row.vue +38 -36
- package/dist/scroll-view/scroll-view.vue +24 -22
- package/dist/search/props.ts +2 -2
- package/dist/search/search.vue +127 -125
- package/dist/search/type.ts +1 -1
- package/dist/side-bar/side-bar.vue +57 -55
- package/dist/side-bar-item/side-bar-item.vue +86 -86
- package/dist/skeleton/skeleton.vue +126 -124
- package/dist/slider/README.md +1 -1
- package/dist/slider/props.ts +2 -2
- package/dist/slider/slider.vue +457 -457
- package/dist/slider/type.ts +1 -1
- package/dist/step-item/step-item.vue +77 -75
- package/dist/stepper/props.ts +2 -2
- package/dist/stepper/stepper.vue +168 -149
- package/dist/stepper/type.ts +1 -1
- package/dist/steps/props.ts +2 -2
- package/dist/steps/steps.vue +83 -81
- package/dist/steps/type.ts +1 -1
- package/dist/sticky/sticky.vue +104 -102
- package/dist/swipe-cell/swipe-cell.vue +91 -89
- package/dist/swiper/README.md +1 -1
- package/dist/swiper/swiper.vue +91 -89
- package/dist/swiper-nav/swiper-nav.vue +38 -36
- package/dist/switch/props.ts +2 -2
- package/dist/switch/switch.vue +62 -62
- package/dist/switch/type.ts +1 -1
- package/dist/tab-bar/tab-bar.vue +88 -86
- package/dist/tab-bar-item/tab-bar-item.vue +85 -82
- package/dist/tab-panel/tab-panel.vue +66 -64
- package/dist/tabs/tabs.vue +294 -287
- package/dist/tag/tag.vue +79 -77
- package/dist/textarea/props.ts +6 -6
- package/dist/textarea/textarea.vue +127 -126
- package/dist/textarea/type.ts +3 -3
- package/dist/toast/toast.vue +107 -106
- package/dist/transition/transition.vue +30 -28
- package/dist/tree-select/tree-select.vue +151 -151
- package/dist/types/config-provider.d.ts +7 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/popover.d.ts +7 -0
- package/dist/upload/README.en-US.md +13 -14
- package/dist/upload/README.md +11 -12
- package/dist/upload/props.ts +2 -4
- package/dist/upload/type.ts +12 -11
- package/dist/upload/upload.css +1 -1
- package/dist/upload/upload.vue +672 -512
- package/dist/watermark/watermark.vue +151 -149
- package/global.d.ts +2 -0
- package/package.json +15 -3
- 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
|
+
};
|
package/dist/message/message.vue
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view>
|
|
3
|
-
<
|
|
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(
|
|
8
|
-
@link-click="handleLinkClick(
|
|
9
|
-
@duration-end="handleDurationEnd(
|
|
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
|
-
</
|
|
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
|
|
49
|
-
name,
|
|
50
|
-
options: {
|
|
51
|
-
styleIsolation: 'shared',
|
|
52
|
-
},
|
|
48
|
+
export default {
|
|
53
49
|
components: {
|
|
54
50
|
TMessageItem,
|
|
55
51
|
},
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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
|
-
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
pageLifetimes: {
|
|
87
|
+
show() {
|
|
88
|
+
this.hideAll();
|
|
89
|
+
},
|
|
89
90
|
},
|
|
90
|
-
},
|
|
91
91
|
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
created() {
|
|
93
|
+
this.instances = [];
|
|
94
|
+
},
|
|
95
|
+
mounted() {
|
|
96
|
+
},
|
|
94
97
|
|
|
95
|
-
|
|
98
|
+
methods: {
|
|
96
99
|
/**
|
|
97
100
|
* 设置消息信息
|
|
98
101
|
* @param msg
|
|
99
102
|
* @param theme
|
|
100
103
|
*/
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
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
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
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
|
-
|
|
129
|
-
|
|
130
|
-
};
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
},
|
|
139
|
+
}
|
|
140
|
+
},
|
|
134
141
|
|
|
135
|
-
|
|
142
|
+
/**
|
|
136
143
|
* 新增消息
|
|
137
144
|
* @param msgObj
|
|
138
145
|
*/
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
146
|
+
addMessage(msgObj) {
|
|
147
|
+
const list = [...this.messageList, { id: msgObj.id }];
|
|
148
|
+
this.messageList = list;
|
|
142
149
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
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
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
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
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
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
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
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
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
204
|
+
return instance;
|
|
205
|
+
}
|
|
206
|
+
console.error('未找到组件,请确认 selector && context 是否正确');
|
|
207
|
+
},
|
|
201
208
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
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
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
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
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
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
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
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
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
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
|
-
|
|
261
|
-
|
|
262
|
-
|
|
267
|
+
handleClose(e) {
|
|
268
|
+
this.$emit('close-btn-click', { e });
|
|
269
|
+
},
|
|
263
270
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
271
|
+
handleLinkClick(e) {
|
|
272
|
+
this.$emit('link-click', { e });
|
|
273
|
+
},
|
|
267
274
|
|
|
268
|
-
|
|
269
|
-
|
|
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>
|
package/dist/message/props.ts
CHANGED