vue自定义指令解决window下table拖动滚动条不方便显示隐藏内容

一，问题描述

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'