nuxtProject/components/sidebar.vue

<template>
  <div class="client-sidebar">
      <ul>
          <li><a class="sidebar-default-box"><i></i><p>咨询</p></a></li>
          <li>
            <div class="sidebar-default-box"><i @click="backTop"></i><p>客服</p></div>
            <div class="sidebar-hover-box">
              <span>服务热线</span><h4>4000522130</h4>
            </div>
          </li>
          <li><a class="sidebar-default-box"><i></i><p>体验</p></a></li>
          <li style="display: none"><i @click="backTop"></i><p>置顶</p></li>
      </ul>
  </div>
</template>

<script>
    export default {
        name: 'mtaSidebar',
      // vue的两个生命钩子，这里不多解释。
// window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
      mounted () {
        window.addEventListener('scroll', this.scrollToTop)
      },
      destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
      },


      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() {
          const that = this
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          that.scrollTop = scrollTop
          if (that.scrollTop > 60) {
            that.btnFlag = true
          } else {
            that.btnFlag = false
          }
        }
      }
      };
</script>

<style lang="scss" scoped>
.client-sidebar{
  display: none;
    position: fixed;
    z-index: 100;
    top: 300px;
    right: 0;
    li{
      width: 94px;height: 102px;position: relative;
      i{width: 45px;height: 40px;display: block;background: #8be0ad;margin: 16px auto;}
      p{font-size:18px;color: #4c4c4c;text-align: center;}
      .sidebar-default-box{border: 1px solid #eee;box-sizing: border-box;background: #fff;z-index: 2;background: #fff;position: absolute;top:0;left: 0;right: 0;bottom: 0;}
      .sidebar-hover-box{
        width: 220px;height: 102px;display: block;padding: 24px;border: 1px solid #eee;transition: all 0.5s;
        position: absolute;right: -150px;background: #fff;top: 0;box-sizing: border-box;z-index: 1;
        span{font-size:16px;display: block;color: #1f1f1f;margin-bottom: 10px}
        h4{font-size:30px;color: #3e7ee7;font-weight: bold;}
      }
    }
    li:hover{
      .sidebar-default-box{background: #5da8f7;}
      .sidebar-hover-box{
        right: 92px;
      }
    }
    li:nth-child(1) i{-background: pink;}
    li:nth-child(2) i{-background: green;}
}
</style>