如何在vue中使用backtop组件

如何在vue中使用backtop组件？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

代码：

<template>  <div class="back-top">   <div >    <img src="imgsrc" class="line" :class="isHide? 'isHide': 'isShow'" : @click="backTop">   </div>  </div> </template> <script> export default {  name: "backTop",  data(){   return {    firstShow: false,//初始化隐藏组件    isHide: false,    scrollFLag: true,   }  },  created() {   document.addEventListener('scroll', () => {    let scroll = document.documentElement.scrollTop    if(scroll > 200){     this.isHide = false     this.firstShow = true    }else{     this.isHide = true    }   })  },  methods: {   backTop(){    if(this.scrollFLag){     this.scrollFLag = false     //屏幕高度     let scroll = document.documentElement.scrollTop     let scrollTimer = setInterval(()=> {      scroll -= 50      document.documentElement.scrollTop = Math.max(scroll, 0)      if( scroll <= 0){       clearInterval(scrollTimer)      }     }, 10)     this.scrollFLag = true    }   },  }, } </script> <style scoped lang="scss"> .back-top{  position: fixed;  top: 0;  right: 10vw;  width: 20px;  height: 500px;  z-index: 200;  .line{   width: 12vw;   height: 100%;   z-index: 20;   cursor: pointer;   opacity: 0.8;   transform: translateY(-100%);   &:hover{    opacity: 1;   }  }  .isShow{   animation: back-top-move 0.5s forwards linear, back-top-yurayura 2s 0.6s forwards linear infinite;  }  .isHide{   animation: back-top-hide 0.5s forwards linear;  } } @keyframes back-top-hide {  from {   transform: translateY(0);  }  to {   transform: translateY(-100%);  } } @keyframes back-top-move {  to {   transform: translateY(0);  } } @keyframes back-top-yurayura {  0%{transform-origin: top center;transform: rotate(0)}  25%{transform-origin: top center;transform: rotate(2deg)}  75%{transform-origin: top center;transform: rotate(-2deg)}  100%{transform-origin: top center;transform: rotate(0)} } </style>

看完上述内容，你们掌握如何在vue中使用backtop组件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！