vue3 Element-Plus el-backtop无效问题及解决
作者：极星(*^_^*)
这篇文章主要介绍了vue3 Element-Plus el-backtop无效问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3 Element-Plus el-backtop无效
基本格式：
<template> <div class="box"> <el-backtop target=".box" :visibility-height="100" :bottom="60" :right="20"></el-backtop> <div> 页面........ </div> </div> </template>
有时候会发现这个根本无效，那么父级盒子最好设置以下样式
height: 100%; // 不必是100vh，只需要是该容器显示的最大高度即可 overflow-x: hidden;
element Backtop 回到顶部简单使用
visibility-height:滚动高度达到此参数值才出现，默认200，是number类型（使用如:visibility-height="100"）
target：触发滚动的对象，是String类型，你可以不传right：控制其显示位置, 距离页面右边距，默认40，是number类型，数值越大，离右边越远。bottom：控制其显示位置, 距离页面底部距离。默认40，是number类型，你可以调整他的值，越大离底部越远。
直接贴代码 拿去piao
//默认的 我们可以什么都不传，调用这个组件即可使用。
<el-backtop></el-backtop>
//设置底部距离的
<el-backtop :bottom="60"> </el-backtop>
//带文字的
<el-backtop :bottom="60">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
top
</div>
</el-backtop>引用了element 直接使用就行！
vue原生回到顶部
<template>
<div class="">
<transition>
<div class="gotop-index" v-show="btnFlag">
<a href="javascript:;" rel="external nofollow" class="gotop-a" @click="backTop"></a>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
btnFlag: false
}
},
mounted() {
// 此处true需要加上，不加滚动事件可能绑定不成功
window.addEventListener("scroll", this.scrollToTop, true);
},
destroyed() {
window.removeEventListener("scroll", this.scrollToTop, true);
},
methods:{
backTop() {
const that = this;
let timer = setInterval(() => {
let ispeed = Math.floor(-that.scrollTop / 5);
document.documentElement.scrollTop = document.body.scrollTop =
that.scrollTop + ispeed;
if (that.scrollTop === 0) {
clearInterval(timer);
}
}, 16);
},
// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
scrollToTop() {
console.log(123);
const that = this;
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
that.scrollTop = scrollTop;
if (that.scrollTop > 30) {
that.btnFlag = true;
} else {
that.btnFlag = false;
}
},
},
}
</script>
<style lang="css" scoped>
.wrap_box{
}
/*返回顶部*/
.gotop-index {
position: fixed;
right: 0.6rem;
bottom: 1.6rem;
display: block;
width: 0.8rem;
height: 0.8rem;
background: #fff;
box-shadow: 0px 0px 4px #ff0000;
display: flex;
border-radius: 50%;
z-index: 999;
}
.gotop-a {
display: block;
width: 0.5rem;
height: 0.5rem;
background: url(~@/assets/images/icon-top.gif) no-repeat 0 0;
background-size: 0.5rem;
margin: auto;
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。