You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.0 KiB
83 lines
2.0 KiB
<!-- 回到顶部的按钮 --> |
|
<template> |
|
<image |
|
v-if="mOption.src" |
|
class="mescroll-totop" |
|
:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-totop-safearea': 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 */ |
|
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { |
|
.mescroll-totop-safearea { |
|
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>
|
|
|