vue自定义指令解决window下table拖动滚动条不方便显示
2019-11-03 本文已影响0人
前端蜗牛老师
一,问题描述
image.png
二,代码实现
1,新建table-move文件夹
新建table-move.js 文件
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
import { OSnow } from '../../utils'
const doTableMove = function(el) {
const pcSyS = OSnow()
if (pcSyS !== 'mac') { 判断是否是mac电脑,如果是不执行下面代码
const outDiv = el.getElementsByClassName('el-table__body-wrapper')[0]
outDiv.onwheel = function(event) {
// 禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)
event.preventDefault()
// 设置鼠标滚轮滚动时屏幕滚动条的移动步长
const step = 30
if (event.deltaY < 0) {
// 向上滚动鼠标滚轮,屏幕滚动条左移
this.scrollLeft -= step
} else {
// 向下滚动鼠标滚轮,屏幕滚动条右移
this.scrollLeft += step
}
}
}
}
export default {
bind(el) {
el.resizeListener = () => {
doTableMove(el)
}
addResizeListener(window.document.body, el.resizeListener)
},
inserted(el) {
doTableMove(el)
},
unbind(el) {
removeResizeListener(window.document.body, el.resizeListener)
const outDiv = el.getElementsByClassName('el-table__body-wrapper')[0]
outDiv.removeEventListener('wheel', doTableMove)
}
}
2,同级目录下新建index.js 导出tableMove
import tableMove from './tableMove'
const install = function(Vue) {
Vue.directive('tableMove', tableMove)
}
if (window.Vue) {
window['tableMove'] = tableMove
Vue.use(install); // eslint-disable-line
}
tableMove.install = install
export default tableMove
3,在外层directive文件夹下新增index.js入口文件
import Vue from 'vue'
import tableMove from '@/directive/table-move/index'
Vue.directive('tableMove', tableMove)
4,在main.js文件中
import '@/directive/index'