vue3 Element-Plus el-backtop無效問題及解決

更新時間：2024年03月19日 09:29:39 作者：極星(*^_^*)

這篇文章主要介紹了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>

有時候會發(fā)現(xiàn)這個根本無效，那么父級盒子最好設置以下樣式

height: 100%;  // 不必是100vh，只需要是該容器顯示的最大高度即可
overflow-x: hidden;

element Backtop 回到頂部簡單使用

visibility-height:滾動高度達到此參數值才出現(xiàn)，默認200，是number類型（使用如:visibility-height="100"）

target：觸發(fā)滾動的對象，是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>