vue自定义指令鼠标滚轮控制元素的x轴

倒霉的航大人

已于 2024-07-31 16:16:55 修改

阅读量107

点赞数 3

分类专栏： javascript 文章标签： vue.js javascript vue 前端 web前端

于 2024-07-31 16:05:38 首次发布

本文链接：https://blog.csdn.net/qq_41563507/article/details/140825303

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue 鼠标滚轮控制元素的x轴

使用directive，自定义指令

// directive/xScroll/index.js
function xWheel(event) {
  event.preventDefault()
  this.scrollLeft += event.deltaY > 0 ? 20 : -20 // 这里的参数控制滚轮的速度
}
export default {
  mounted(el) {
    el.addEventListener('wheel', xWheel)
  },
  beforeUnmount(el) {
    el.removeEventListener('whell', xWheel)
  }
}

// directive/index.js
import xScroll from './xScroll'

const directives = {
  xScroll // 鼠标滚轮控制x轴
}

export default {
  install(app) {
    Object.keys(directives).forEach((key) => {
      app.directive(key, directives[key])
    })
  }
}

使用

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import directive from './directive/index.js'
const app = createApp(App)
app.use(directive)
app.mount('#app')