82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<!-- 回到顶部的按钮 -->
|
|
<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: 99;
|
|
position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
|
|
right: 46rpx !important;
|
|
bottom: 272rpx !important;
|
|
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>
|