vue项目不同组件通过鼠标进行切换

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

vue项目不同组件通过鼠标进行切换


一、script中的代码逻辑

//在计算属性中实时监听鼠标滑动事件handleScroll
  mounted() {
    
    
         window.addEventListener('mousewheel',this.handleScroll);
  },
  methods: {
    
    
  handleScroll(m){
    
    
      if(m.deltaY>0){
    
    
          //当鼠标往下滑时让他跳转到router中的name为BackgroundSetting页面
          this.$router.push({
    
    name:'BackgroundSetting'})
      }else{
    
    
         //当鼠标往上滑时让他跳转到router中的name为Home页面
          this.$router.push({
    
    name:'Home'})
      }
    }
  }

完成,年轻的程序员,大佬勿喷,希望对大家有用,有问题可以留言。

猜你喜欢

转载自blog.csdn.net/HHyuang/article/details/125298143