vue 文本溢出鼠标拖动查看

全局注册自定义指令（main.js）

Vue.directive('dragabled', {
  bind(el, binding, vnode, oldVnode) {
    if (!binding) return
    el.onmousedown = e => {
      let disX = e.clientX
      let disY = e.clientY
      el.style.cursor = 'move'
      document.onmousemove = e => {
        e.preventDefault()
        const left = e.clientX - disX
        disX = e.clientX
        el.scrollLeft += -left
        const top = e.clientY - disY
        disY = e.clientY
        el.scrollTop += -top
      }
      document.onmouseup = e => {
        el.style.cursor = 'auto'
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

使用方法

<div v-dragabled style="overflow:auto;"></div>

 

附：鼠标置于指定元素类名上不可拖动

......     
    el.onmousedown = e => {
      // 鼠标置于指定元素类名上不可拖动
      const classNames = e.path.map(p => p.className).reduce((total, curr) => {
        if (curr) total = [...total, ...curr.split(' ')]
        return total
      }, [])
      if (classNames.includes('flow-node')) return
      ......  
    }
......