vue +typescript （用的 vue-class-component）写自定义指令drag

Z时代
2024-02-08
分类：IT

在export default中是可以运行的自定义指令directives代码，但是写到export default class Draw extends Vue{}里却报错，显示el未定义。难道是因为是vue+ts，所以写的格式不对？不明白为什么，求救。

export default {
methods: {
directives: {

drag (el) {
  let oDiv = el
  let self = this
  document.onselectstart = function () {
    return false
  }
  oDiv.onmousedown = function (e) {
    // 鼠标按下，计算当前元素距离可视区的距离
    let disX = e.clientX - oDiv.offsetLeft
    let disY = e.clientY - oDiv.offsetTop
    document.onmousemove = function (e) {
      // 通过事件委托，计算移动的距离
      let l = e.clientX - disX
      let t = e.clientY - disY
      // 不超出可视范围
      if (l <= 0) {
        l = 5 // 设置成5,离边缘不要太近
      } else if (l > document.documentElement.clientWidth - el.clientWidth) { // document.documentElement.clientWidth屏幕可视区宽度
        l = document.documentElement.clientWidth - el.clientWidth - 5
      }
      if (t <= 0) {
        t = 5
      } else if (t > document.documentElement.clientHeight - el.clientHeight) {
        t = document.documentElement.clientHeight - el.clientHeight - 5
      }
      // 移动当前元素
      oDiv.style.left = l + 'px'
      oDiv.style.top = t + 'px'
    }
    document.onmouseup = function (e) {
      document.onmousemove = null
      document.onmouseup = null
    }
    // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
    return false
  }
},
/* 阻止拖拽 */
stopdrag (el, binding, vnode) {
  let oDiv = el
  oDiv.onmousedown = function (e) {
    e.stopPropagation()
  }}