<!-- 回到顶部的按钮 -->
|
<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>
|
