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;

//默认的 我们可以什么都不传，调用这个组件即可使用。
<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>

<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>