1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
<u-mask :show="visible" @click="handleClick" :zoom="false">
<view class="tip-view" :style="'margin-top:' + statusBarHeight + 'px'">
<image
class="tip-image"
:src="imageUrl"
:style="imageStyle"
mode="widthFix"
></image>
</view>
</u-mask>
</template>
<script>
/**
* @description 创建一个遮罩层，提示图片
* @property {Boolean} show 是否显示遮罩（默认false）
* @property {Object} imageName 图片地址名
* @property {Object} imageStyle 自定义样式对象
* @example <mask-tip :show="show"></mask-tip>
*/
export default {
props: {
show: {
type: Boolean,
default: false,
},
imageName: {
type: String,
default: ''
},
imageStyle: {
type: String,
default: ''
},
name: {
type: String,
default: ''
},
timeout: {
type: Boolean,
default: true
}
},
data() {
return {
statusBarHeight: 20,
visible: false
}
},
watch: {
show(val) {
if (!val) return
let value = this.vuex_not_first
if (!value[this.name]) {
uni.getSystemInfo({
success: (res) => {
this.statusBarHeight = res.statusBarHeight
setTimeout(() => {
this.visible = true
}, this.time)
},
})
value[this.name] = true
this.$u.vuex('vuex_not_first', value)
}
}
},
computed: {
imageUrl() {
return process.uniEnv.qn_base_url + this.imageName
},
time() {
return this.timeout ? 1500 : 0
}
},
methods: {
handleClick() {
this.visible = false
this.$emit('click')
},
},
}
</script>
<style lang="scss" scoped>
.tip-view {
}
</style>