iview BackTop 返回顶部 组件无效解决

通过查找博客,此组件需要固定的高度才能使用,而笔者的页面主内容显示区域高度是通过calc(~'100vh - 140px');计算得来,故无法使用,最终只得自己实现返回顶部方法,代码如下:

页面布局结构:

<Layout>
    <Header>
    </Header>

    <Layout>
        <Sider>
        </Sider>

        <Layout class="index-main" ref="layoutmain">
        <!--主内容区域,即滚动条出现区域-->
        <Content class="content" ref="indexcontent">
        
        </Content>
          <Footer class="con-foot">2011-2020 &copy;
          <BackTop @on-click="toTop(30)"></BackTop><!--返回顶部组件,只使用原来的样式,方法重写-->
        </Layout>

      </Layout>
</Layout>

返回顶部方法:

<script>

export default {
  name: 'index',
  mounted() {
    let div = this.$refs.layoutmain.$el;
    div.addEventListener('scroll', this.handleScroll);//监听滚动条
    
  },
    methods: {
    handleScroll (e) {
      let div = this.$refs.layoutmain.$el;
      let backDiv= document.querySelector('.ivu-back-top');
      if (div.scrollTop > 100) {//大于滚动距离显示返回顶部图标
        
        backDiv.style.display = 'block';
      } else {
        
        backDiv.style.display = 'none';
      }
    },
    toTop(step=40){

      //参数step表示时间间隔的幅度大小，以此来控制速度
      //当回到页面顶部的时候需要将定时器清除
      let div = this.$refs.layoutmain.$el;
      div.scrollTop-=step;
      if (div.scrollTop>0) {
          var time=setTimeout(()=>this.toTop(step),15);
      }else {
          clearTimeout(time);
      }
    }
};
</script>