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
| <!-- 回到顶部的按钮 -->
| <template>
| <image
| v-if="mOption.src"
| class="mescroll-totop"
| :class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-safe-bottom': mOption.safearea}]"
| :style="{'z-index':mOption.zIndex, 'left': left, 'right': right, 'bottom':addUnit(mOption.bottom), 'width':addUnit(mOption.width), 'border-radius':addUnit(mOption.radius)}"
| :src="mOption.src"
| mode="widthFix"
| @click="toTopClick"
| />
| </template>
|
| <script>
| export default {
| props: {
| // up.toTop的配置项
| option: Object,
| // 是否显示
| value: false
| },
| computed: {
| // 支付宝小程序需写成计算属性,prop定义default仍报错
| mOption(){
| return this.option || {}
| },
| // 优先显示左边
| left(){
| return this.mOption.left ? this.addUnit(this.mOption.left) : 'auto';
| },
| // 右边距离 (优先显示左边)
| right() {
| return this.mOption.left ? 'auto' : this.addUnit(this.mOption.right);
| }
| },
| methods: {
| addUnit(num){
| if(!num) return 0;
| if(typeof num === 'number') return num + 'rpx';
| return num
| },
| toTopClick() {
| this.$emit('input', false); // 使v-model生效
| this.$emit('click'); // 派发点击事件
| }
| }
| };
| </script>
|
| <style>
| /* 回到顶部的按钮 */
| .mescroll-totop {
| z-index: 9990;
| position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
| right: 20rpx;
| bottom: 120rpx;
| width: 72rpx;
| height: auto;
| border-radius: 50%;
| opacity: 0;
| transition: opacity 0.5s; /* 过渡 */
| margin-bottom: var(--window-bottom); /* css变量 */
| }
|
| /* 适配 iPhoneX */
| .mescroll-safe-bottom{
| margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
| margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
| }
|
| /* 显示 -- 淡入 */
| .mescroll-totop-in {
| opacity: 1;
| }
|
| /* 隐藏 -- 淡出且不接收事件*/
| .mescroll-totop-out {
| opacity: 0;
| pointer-events: none;
| }
| </style>
|
|
