侧边栏一个是回到顶部，还有一个是鼠标悬浮显示二维码。使用的是mouseenter和mouseleave事件

直接代码吧

<template>
  <div>
      <div class="side">
        <a class="to-top" @click="toHead"><i class="el-icon-arrow-up"></i></a>
        <a class="qr-code" @mouseenter="showQrCode=true" @mouseleave="showQrCode=false">二维码</a>
      </div>
      <div class="side-img">
          <img v-if="showQrCode" src="../../static/qrcode.jpg" class="qrcode-img">
      </div>
  </div>
</template>

<style scoped>
.side{
    position: fixed;
    top: 40rem;
    right: 4rem;
}
.side-img{
    position: fixed;
    top: 40rem;
    right: 7rem;
}
.to-top{
    display: block; 
    border: 2px solid #000;
    text-align: center;
}
.qrcode-img{
    width: 10rem;
}
</style>


<script>
export default {
  data(){
      return{
        showQrCode:false
      }
  },
  methods:{
      toHead(){
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0
      },

  }
}
</script>

赏

谢谢你请我吃糖果

微信