@vtj/materials 0.10.1-alpha.0 → 0.10.1-alpha.2

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 (56) hide show
  1. package/dist/assets/antdv/index.umd.js +2 -2
  2. package/dist/assets/charts/index.umd.js +2 -2
  3. package/dist/assets/element/index.umd.js +2 -2
  4. package/dist/assets/ui/index.umd.js +2 -2
  5. package/dist/assets/uni-h5/index.umd.js +3 -3
  6. package/dist/assets/uni-ui/index.umd.js +7 -0
  7. package/dist/assets/vant/index.umd.js +2 -2
  8. package/dist/deps/@vtj/charts/index.umd.js +2 -2
  9. package/dist/deps/@vtj/icons/index.umd.js +2 -2
  10. package/dist/deps/@vtj/ui/index.umd.js +2 -2
  11. package/dist/deps/@vtj/uni/index.umd.js +3 -3
  12. package/dist/deps/@vtj/utils/index.umd.js +2 -2
  13. package/dist/deps/mockjs/mock-min.js +10 -0
  14. package/dist/deps/uni-ui/index.umd.js +1 -0
  15. package/dist/deps/uni-ui/style.css +1 -0
  16. package/package.json +9 -6
  17. package/src/env.d.ts +7 -0
  18. package/src/uni-h5/components/index.ts +43 -2
  19. package/src/uni-ui/components/badge.ts +73 -0
  20. package/src/uni-ui/components/index.ts +30 -0
  21. package/src/uni-ui/index.ts +213 -0
  22. package/src/uni-ui/lib/uni-datetime-picker/calendar-item.vue +177 -0
  23. package/src/uni-ui/lib/uni-datetime-picker/calendar.vue +947 -0
  24. package/src/uni-ui/lib/uni-datetime-picker/i18n/en.json +22 -0
  25. package/src/uni-ui/lib/uni-datetime-picker/i18n/index.js +8 -0
  26. package/src/uni-ui/lib/uni-datetime-picker/i18n/zh-Hans.json +22 -0
  27. package/src/uni-ui/lib/uni-datetime-picker/i18n/zh-Hant.json +22 -0
  28. package/src/uni-ui/lib/uni-datetime-picker/time-picker.vue +940 -0
  29. package/src/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue +1232 -0
  30. package/src/uni-ui/lib/uni-datetime-picker/util.js +421 -0
  31. package/src/uni-ui/lib/uni-forms/uni-forms.vue +416 -0
  32. package/src/uni-ui/lib/uni-forms/utils.js +293 -0
  33. package/src/uni-ui/lib/uni-forms/validate.js +486 -0
  34. package/src/uni-ui/lib/uni-popup/i18n/en.json +7 -0
  35. package/src/uni-ui/lib/uni-popup/i18n/index.js +8 -0
  36. package/src/uni-ui/lib/uni-popup/i18n/zh-Hans.json +7 -0
  37. package/src/uni-ui/lib/uni-popup/i18n/zh-Hant.json +7 -0
  38. package/src/uni-ui/lib/uni-popup/keypress.js +45 -0
  39. package/src/uni-ui/lib/uni-popup/popup.js +26 -0
  40. package/src/uni-ui/lib/uni-popup/uni-popup.uvue +90 -0
  41. package/src/uni-ui/lib/uni-popup/uni-popup.vue +552 -0
  42. package/src/uni-ui/lib/uni-swipe-action-item/bindingx.js +302 -0
  43. package/src/uni-ui/lib/uni-swipe-action-item/isPC.js +12 -0
  44. package/src/uni-ui/lib/uni-swipe-action-item/mpalipay.js +195 -0
  45. package/src/uni-ui/lib/uni-swipe-action-item/mpother.js +260 -0
  46. package/src/uni-ui/lib/uni-swipe-action-item/mpwxs.js +84 -0
  47. package/src/uni-ui/lib/uni-swipe-action-item/render.js +270 -0
  48. package/src/uni-ui/lib/uni-swipe-action-item/uni-swipe-action-item.vue +494 -0
  49. package/src/uni-ui/lib/uni-swipe-action-item/wx.wxs +341 -0
  50. package/src/uni-ui/lib/uni-th/filter-dropdown.vue +511 -0
  51. package/src/uni-ui/lib/uni-th/uni-th.vue +295 -0
  52. package/src/uni-ui/lib/uni-tr/table-checkbox.vue +179 -0
  53. package/src/uni-ui/lib/uni-tr/uni-tr.vue +184 -0
  54. package/src/uni-ui/lib/uni.scss +76 -0
  55. package/src/uni-ui/polyfill.ts +41 -0
  56. package/src/version.ts +2 -2
@@ -0,0 +1,486 @@
1
+ var pattern = {
2
+ email: /^\S+?@\S+?\.\S+?$/,
3
+ idcard: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
4
+ url: new RegExp(
5
+ "^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$",
6
+ 'i')
7
+ };
8
+
9
+ const FORMAT_MAPPING = {
10
+ "int": 'integer',
11
+ "bool": 'boolean',
12
+ "double": 'number',
13
+ "long": 'number',
14
+ "password": 'string'
15
+ // "fileurls": 'array'
16
+ }
17
+
18
+ function formatMessage(args, resources = '') {
19
+ var defaultMessage = ['label']
20
+ defaultMessage.forEach((item) => {
21
+ if (args[item] === undefined) {
22
+ args[item] = ''
23
+ }
24
+ })
25
+
26
+ let str = resources
27
+ for (let key in args) {
28
+ let reg = new RegExp('{' + key + '}')
29
+ str = str.replace(reg, args[key])
30
+ }
31
+ return str
32
+ }
33
+
34
+ function isEmptyValue(value, type) {
35
+ if (value === undefined || value === null) {
36
+ return true;
37
+ }
38
+
39
+ if (typeof value === 'string' && !value) {
40
+ return true;
41
+ }
42
+
43
+ if (Array.isArray(value) && !value.length) {
44
+ return true;
45
+ }
46
+
47
+ if (type === 'object' && !Object.keys(value).length) {
48
+ return true;
49
+ }
50
+
51
+ return false;
52
+ }
53
+
54
+ const types = {
55
+ integer(value) {
56
+ return types.number(value) && parseInt(value, 10) === value;
57
+ },
58
+ string(value) {
59
+ return typeof value === 'string';
60
+ },
61
+ number(value) {
62
+ if (isNaN(value)) {
63
+ return false;
64
+ }
65
+ return typeof value === 'number';
66
+ },
67
+ "boolean": function(value) {
68
+ return typeof value === 'boolean';
69
+ },
70
+ "float": function(value) {
71
+ return types.number(value) && !types.integer(value);
72
+ },
73
+ array(value) {
74
+ return Array.isArray(value);
75
+ },
76
+ object(value) {
77
+ return typeof value === 'object' && !types.array(value);
78
+ },
79
+ date(value) {
80
+ return value instanceof Date;
81
+ },
82
+ timestamp(value) {
83
+ if (!this.integer(value) || Math.abs(value).toString().length > 16) {
84
+ return false
85
+ }
86
+ return true;
87
+ },
88
+ file(value) {
89
+ return typeof value.url === 'string';
90
+ },
91
+ email(value) {
92
+ return typeof value === 'string' && !!value.match(pattern.email) && value.length < 255;
93
+ },
94
+ url(value) {
95
+ return typeof value === 'string' && !!value.match(pattern.url);
96
+ },
97
+ pattern(reg, value) {
98
+ try {
99
+ return new RegExp(reg).test(value);
100
+ } catch (e) {
101
+ return false;
102
+ }
103
+ },
104
+ method(value) {
105
+ return typeof value === 'function';
106
+ },
107
+ idcard(value) {
108
+ return typeof value === 'string' && !!value.match(pattern.idcard);
109
+ },
110
+ 'url-https'(value) {
111
+ return this.url(value) && value.startsWith('https://');
112
+ },
113
+ 'url-scheme'(value) {
114
+ return value.startsWith('://');
115
+ },
116
+ 'url-web'(value) {
117
+ return false;
118
+ }
119
+ }
120
+
121
+ class RuleValidator {
122
+
123
+ constructor(message) {
124
+ this._message = message
125
+ }
126
+
127
+ async validateRule(fieldKey, fieldValue, value, data, allData) {
128
+ var result = null
129
+
130
+ let rules = fieldValue.rules
131
+
132
+ let hasRequired = rules.findIndex((item) => {
133
+ return item.required
134
+ })
135
+ if (hasRequired < 0) {
136
+ if (value === null || value === undefined) {
137
+ return result
138
+ }
139
+ if (typeof value === 'string' && !value.length) {
140
+ return result
141
+ }
142
+ }
143
+
144
+ var message = this._message
145
+
146
+ if (rules === undefined) {
147
+ return message['default']
148
+ }
149
+
150
+ for (var i = 0; i < rules.length; i++) {
151
+ let rule = rules[i]
152
+ let vt = this._getValidateType(rule)
153
+
154
+ Object.assign(rule, {
155
+ label: fieldValue.label || `["${fieldKey}"]`
156
+ })
157
+
158
+ if (RuleValidatorHelper[vt]) {
159
+ result = RuleValidatorHelper[vt](rule, value, message)
160
+ if (result != null) {
161
+ break
162
+ }
163
+ }
164
+
165
+ if (rule.validateExpr) {
166
+ let now = Date.now()
167
+ let resultExpr = rule.validateExpr(value, allData, now)
168
+ if (resultExpr === false) {
169
+ result = this._getMessage(rule, rule.errorMessage || this._message['default'])
170
+ break
171
+ }
172
+ }
173
+
174
+ if (rule.validateFunction) {
175
+ result = await this.validateFunction(rule, value, data, allData, vt)
176
+ if (result !== null) {
177
+ break
178
+ }
179
+ }
180
+ }
181
+
182
+ if (result !== null) {
183
+ result = message.TAG + result
184
+ }
185
+
186
+ return result
187
+ }
188
+
189
+ async validateFunction(rule, value, data, allData, vt) {
190
+ let result = null
191
+ try {
192
+ let callbackMessage = null
193
+ const res = await rule.validateFunction(rule, value, allData || data, (message) => {
194
+ callbackMessage = message
195
+ })
196
+ if (callbackMessage || (typeof res === 'string' && res) || res === false) {
197
+ result = this._getMessage(rule, callbackMessage || res, vt)
198
+ }
199
+ } catch (e) {
200
+ result = this._getMessage(rule, e.message, vt)
201
+ }
202
+ return result
203
+ }
204
+
205
+ _getMessage(rule, message, vt) {
206
+ return formatMessage(rule, message || rule.errorMessage || this._message[vt] || message['default'])
207
+ }
208
+
209
+ _getValidateType(rule) {
210
+ var result = ''
211
+ if (rule.required) {
212
+ result = 'required'
213
+ } else if (rule.format) {
214
+ result = 'format'
215
+ } else if (rule.arrayType) {
216
+ result = 'arrayTypeFormat'
217
+ } else if (rule.range) {
218
+ result = 'range'
219
+ } else if (rule.maximum !== undefined || rule.minimum !== undefined) {
220
+ result = 'rangeNumber'
221
+ } else if (rule.maxLength !== undefined || rule.minLength !== undefined) {
222
+ result = 'rangeLength'
223
+ } else if (rule.pattern) {
224
+ result = 'pattern'
225
+ } else if (rule.validateFunction) {
226
+ result = 'validateFunction'
227
+ }
228
+ return result
229
+ }
230
+ }
231
+
232
+ const RuleValidatorHelper = {
233
+ required(rule, value, message) {
234
+ if (rule.required && isEmptyValue(value, rule.format || typeof value)) {
235
+ return formatMessage(rule, rule.errorMessage || message.required);
236
+ }
237
+
238
+ return null
239
+ },
240
+
241
+ range(rule, value, message) {
242
+ const {
243
+ range,
244
+ errorMessage
245
+ } = rule;
246
+
247
+ let list = new Array(range.length);
248
+ for (let i = 0; i < range.length; i++) {
249
+ const item = range[i];
250
+ if (types.object(item) && item.value !== undefined) {
251
+ list[i] = item.value;
252
+ } else {
253
+ list[i] = item;
254
+ }
255
+ }
256
+
257
+ let result = false
258
+ if (Array.isArray(value)) {
259
+ result = (new Set(value.concat(list)).size === list.length);
260
+ } else {
261
+ if (list.indexOf(value) > -1) {
262
+ result = true;
263
+ }
264
+ }
265
+
266
+ if (!result) {
267
+ return formatMessage(rule, errorMessage || message['enum']);
268
+ }
269
+
270
+ return null
271
+ },
272
+
273
+ rangeNumber(rule, value, message) {
274
+ if (!types.number(value)) {
275
+ return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
276
+ }
277
+
278
+ let {
279
+ minimum,
280
+ maximum,
281
+ exclusiveMinimum,
282
+ exclusiveMaximum
283
+ } = rule;
284
+ let min = exclusiveMinimum ? value <= minimum : value < minimum;
285
+ let max = exclusiveMaximum ? value >= maximum : value > maximum;
286
+
287
+ if (minimum !== undefined && min) {
288
+ return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMinimum ?
289
+ 'exclusiveMinimum' : 'minimum'
290
+ ])
291
+ } else if (maximum !== undefined && max) {
292
+ return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMaximum ?
293
+ 'exclusiveMaximum' : 'maximum'
294
+ ])
295
+ } else if (minimum !== undefined && maximum !== undefined && (min || max)) {
296
+ return formatMessage(rule, rule.errorMessage || message['number'].range)
297
+ }
298
+
299
+ return null
300
+ },
301
+
302
+ rangeLength(rule, value, message) {
303
+ if (!types.string(value) && !types.array(value)) {
304
+ return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
305
+ }
306
+
307
+ let min = rule.minLength;
308
+ let max = rule.maxLength;
309
+ let val = value.length;
310
+
311
+ if (min !== undefined && val < min) {
312
+ return formatMessage(rule, rule.errorMessage || message['length'].minLength)
313
+ } else if (max !== undefined && val > max) {
314
+ return formatMessage(rule, rule.errorMessage || message['length'].maxLength)
315
+ } else if (min !== undefined && max !== undefined && (val < min || val > max)) {
316
+ return formatMessage(rule, rule.errorMessage || message['length'].range)
317
+ }
318
+
319
+ return null
320
+ },
321
+
322
+ pattern(rule, value, message) {
323
+ if (!types['pattern'](rule.pattern, value)) {
324
+ return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
325
+ }
326
+
327
+ return null
328
+ },
329
+
330
+ format(rule, value, message) {
331
+ var customTypes = Object.keys(types);
332
+ var format = FORMAT_MAPPING[rule.format] ? FORMAT_MAPPING[rule.format] : (rule.format || rule.arrayType);
333
+
334
+ if (customTypes.indexOf(format) > -1) {
335
+ if (!types[format](value)) {
336
+ return formatMessage(rule, rule.errorMessage || message.typeError);
337
+ }
338
+ }
339
+
340
+ return null
341
+ },
342
+
343
+ arrayTypeFormat(rule, value, message) {
344
+ if (!Array.isArray(value)) {
345
+ return formatMessage(rule, rule.errorMessage || message.typeError);
346
+ }
347
+
348
+ for (let i = 0; i < value.length; i++) {
349
+ const element = value[i];
350
+ let formatResult = this.format(rule, element, message)
351
+ if (formatResult !== null) {
352
+ return formatResult
353
+ }
354
+ }
355
+
356
+ return null
357
+ }
358
+ }
359
+
360
+ class SchemaValidator extends RuleValidator {
361
+
362
+ constructor(schema, options) {
363
+ super(SchemaValidator.message);
364
+
365
+ this._schema = schema
366
+ this._options = options || null
367
+ }
368
+
369
+ updateSchema(schema) {
370
+ this._schema = schema
371
+ }
372
+
373
+ async validate(data, allData) {
374
+ let result = this._checkFieldInSchema(data)
375
+ if (!result) {
376
+ result = await this.invokeValidate(data, false, allData)
377
+ }
378
+ return result.length ? result[0] : null
379
+ }
380
+
381
+ async validateAll(data, allData) {
382
+ let result = this._checkFieldInSchema(data)
383
+ if (!result) {
384
+ result = await this.invokeValidate(data, true, allData)
385
+ }
386
+ return result
387
+ }
388
+
389
+ async validateUpdate(data, allData) {
390
+ let result = this._checkFieldInSchema(data)
391
+ if (!result) {
392
+ result = await this.invokeValidateUpdate(data, false, allData)
393
+ }
394
+ return result.length ? result[0] : null
395
+ }
396
+
397
+ async invokeValidate(data, all, allData) {
398
+ let result = []
399
+ let schema = this._schema
400
+ for (let key in schema) {
401
+ let value = schema[key]
402
+ let errorMessage = await this.validateRule(key, value, data[key], data, allData)
403
+ if (errorMessage != null) {
404
+ result.push({
405
+ key,
406
+ errorMessage
407
+ })
408
+ if (!all) break
409
+ }
410
+ }
411
+ return result
412
+ }
413
+
414
+ async invokeValidateUpdate(data, all, allData) {
415
+ let result = []
416
+ for (let key in data) {
417
+ let errorMessage = await this.validateRule(key, this._schema[key], data[key], data, allData)
418
+ if (errorMessage != null) {
419
+ result.push({
420
+ key,
421
+ errorMessage
422
+ })
423
+ if (!all) break
424
+ }
425
+ }
426
+ return result
427
+ }
428
+
429
+ _checkFieldInSchema(data) {
430
+ var keys = Object.keys(data)
431
+ var keys2 = Object.keys(this._schema)
432
+ if (new Set(keys.concat(keys2)).size === keys2.length) {
433
+ return ''
434
+ }
435
+
436
+ var noExistFields = keys.filter((key) => {
437
+ return keys2.indexOf(key) < 0;
438
+ })
439
+ var errorMessage = formatMessage({
440
+ field: JSON.stringify(noExistFields)
441
+ }, SchemaValidator.message.TAG + SchemaValidator.message['defaultInvalid'])
442
+ return [{
443
+ key: 'invalid',
444
+ errorMessage
445
+ }]
446
+ }
447
+ }
448
+
449
+ function Message() {
450
+ return {
451
+ TAG: "",
452
+ default: '验证错误',
453
+ defaultInvalid: '提交的字段{field}在数据库中并不存在',
454
+ validateFunction: '验证无效',
455
+ required: '{label}必填',
456
+ 'enum': '{label}超出范围',
457
+ timestamp: '{label}格式无效',
458
+ whitespace: '{label}不能为空',
459
+ typeError: '{label}类型无效',
460
+ date: {
461
+ format: '{label}日期{value}格式无效',
462
+ parse: '{label}日期无法解析,{value}无效',
463
+ invalid: '{label}日期{value}无效'
464
+ },
465
+ length: {
466
+ minLength: '{label}长度不能少于{minLength}',
467
+ maxLength: '{label}长度不能超过{maxLength}',
468
+ range: '{label}必须介于{minLength}和{maxLength}之间'
469
+ },
470
+ number: {
471
+ minimum: '{label}不能小于{minimum}',
472
+ maximum: '{label}不能大于{maximum}',
473
+ exclusiveMinimum: '{label}不能小于等于{minimum}',
474
+ exclusiveMaximum: '{label}不能大于等于{maximum}',
475
+ range: '{label}必须介于{minimum}and{maximum}之间'
476
+ },
477
+ pattern: {
478
+ mismatch: '{label}格式不匹配'
479
+ }
480
+ };
481
+ }
482
+
483
+
484
+ SchemaValidator.message = new Message();
485
+
486
+ export default SchemaValidator
@@ -0,0 +1,7 @@
1
+ {
2
+ "uni-popup.cancel": "cancel",
3
+ "uni-popup.ok": "ok",
4
+ "uni-popup.placeholder": "pleace enter",
5
+ "uni-popup.title": "Hint",
6
+ "uni-popup.shareTitle": "Share to"
7
+ }
@@ -0,0 +1,8 @@
1
+ import en from './en.json'
2
+ import zhHans from './zh-Hans.json'
3
+ import zhHant from './zh-Hant.json'
4
+ export default {
5
+ en,
6
+ 'zh-Hans': zhHans,
7
+ 'zh-Hant': zhHant
8
+ }
@@ -0,0 +1,7 @@
1
+ {
2
+ "uni-popup.cancel": "取消",
3
+ "uni-popup.ok": "确定",
4
+ "uni-popup.placeholder": "请输入",
5
+ "uni-popup.title": "提示",
6
+ "uni-popup.shareTitle": "分享到"
7
+ }
@@ -0,0 +1,7 @@
1
+ {
2
+ "uni-popup.cancel": "取消",
3
+ "uni-popup.ok": "確定",
4
+ "uni-popup.placeholder": "請輸入",
5
+ "uni-popup.title": "提示",
6
+ "uni-popup.shareTitle": "分享到"
7
+ }
@@ -0,0 +1,45 @@
1
+ // #ifdef H5
2
+ export default {
3
+ name: 'Keypress',
4
+ props: {
5
+ disable: {
6
+ type: Boolean,
7
+ default: false
8
+ }
9
+ },
10
+ mounted () {
11
+ const keyNames = {
12
+ esc: ['Esc', 'Escape'],
13
+ tab: 'Tab',
14
+ enter: 'Enter',
15
+ space: [' ', 'Spacebar'],
16
+ up: ['Up', 'ArrowUp'],
17
+ left: ['Left', 'ArrowLeft'],
18
+ right: ['Right', 'ArrowRight'],
19
+ down: ['Down', 'ArrowDown'],
20
+ delete: ['Backspace', 'Delete', 'Del']
21
+ }
22
+ const listener = ($event) => {
23
+ if (this.disable) {
24
+ return
25
+ }
26
+ const keyName = Object.keys(keyNames).find(key => {
27
+ const keyName = $event.key
28
+ const value = keyNames[key]
29
+ return value === keyName || (Array.isArray(value) && value.includes(keyName))
30
+ })
31
+ if (keyName) {
32
+ // 避免和其他按键事件冲突
33
+ setTimeout(() => {
34
+ this.$emit(keyName, {})
35
+ }, 0)
36
+ }
37
+ }
38
+ document.addEventListener('keyup', listener)
39
+ // this.$once('hook:beforeDestroy', () => {
40
+ // document.removeEventListener('keyup', listener)
41
+ // })
42
+ },
43
+ render: () => {}
44
+ }
45
+ // #endif
@@ -0,0 +1,26 @@
1
+
2
+ export default {
3
+ data() {
4
+ return {
5
+
6
+ }
7
+ },
8
+ created(){
9
+ this.popup = this.getParent()
10
+ },
11
+ methods:{
12
+ /**
13
+ * 获取父元素实例
14
+ */
15
+ getParent(name = 'uniPopup') {
16
+ let parent = this.$parent;
17
+ let parentName = parent.$options.name;
18
+ while (parentName !== name) {
19
+ parent = parent.$parent;
20
+ if (!parent) return false
21
+ parentName = parent.$options.name;
22
+ }
23
+ return parent;
24
+ },
25
+ }
26
+ }
@@ -0,0 +1,90 @@
1
+ <template>
2
+ <view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
3
+ <view @click.stop>
4
+ <slot></slot>
5
+ </view>
6
+ </view>
7
+ </template>
8
+
9
+ <script>
10
+ type CloseCallBack = ()=> void;
11
+ let closeCallBack:CloseCallBack = () :void => {};
12
+ export default {
13
+ emits:["close","clickMask"],
14
+ data() {
15
+ return {
16
+ isShow:false,
17
+ isOpen:false
18
+ }
19
+ },
20
+ props: {
21
+ maskClick: {
22
+ type: Boolean,
23
+ default: true
24
+ },
25
+ },
26
+ watch: {
27
+ // 设置show = true 时,如果没有 open 需要设置为 open
28
+ isShow:{
29
+ handler(isShow) {
30
+ // console.log("isShow",isShow)
31
+ if(isShow && this.isOpen == false){
32
+ this.isOpen = true
33
+ }
34
+ },
35
+ immediate:true
36
+ },
37
+ // 设置isOpen = true 时,如果没有 isShow 需要设置为 isShow
38
+ isOpen:{
39
+ handler(isOpen) {
40
+ // console.log("isOpen",isOpen)
41
+ if(isOpen && this.isShow == false){
42
+ this.isShow = true
43
+ }
44
+ },
45
+ immediate:true
46
+ }
47
+ },
48
+ methods:{
49
+ open(){
50
+ // ...funs : CloseCallBack[]
51
+ // if(funs.length > 0){
52
+ // closeCallBack = funs[0]
53
+ // }
54
+ this.isOpen = true;
55
+ },
56
+ clickMask(){
57
+ if(this.maskClick == true){
58
+ this.$emit('clickMask')
59
+ this.close()
60
+ }
61
+ },
62
+ close(): void{
63
+ this.isOpen = false;
64
+ this.$emit('close')
65
+ closeCallBack()
66
+ },
67
+ hiden(){
68
+ this.isShow = false
69
+ },
70
+ show(){
71
+ this.isShow = true
72
+ }
73
+ }
74
+ }
75
+ </script>
76
+
77
+ <style>
78
+ .popup-root {
79
+ position: fixed;
80
+ top: 0;
81
+ left: 0;
82
+ width: 750rpx;
83
+ height: 100%;
84
+ flex: 1;
85
+ background-color: rgba(0, 0, 0, 0.3);
86
+ justify-content: center;
87
+ align-items: center;
88
+ z-index: 99;
89
+ }
90
+ </style>