有没有大佬帮我改一下js转ts格式，有偿

Question

有偿一瓶快乐水，大瓶的！就改两个方法的格式就好。谢谢大佬！1.自定义指令，2.缩放

1.自定义指令拖拽（总是显示el未定义）
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: {
  inserted: function (el, binding, vnode) {
    let oDiv = el
    oDiv.onmousedown = function (e) {
      e.stopPropagation()
    }
  }
}

2.鼠标点击缩放
dragEagle: function (e) {

  var targetDiv = document.getElementById('eagleMapContainer') // e.target.parentNode.parentNode;.children[0]

  // 得到点击时该地图容器的宽高：
  var targetDivWidth = targetDiv.offsetWidth
  var targetDivHeight = targetDiv.offsetHeight

  var startX = e.clientX
  var startY = e.clientY

  // var _this = this

  document.onmousemove = function (e) {
    console.log('move')
    e.preventDefault()
    // 得到鼠标拖动的宽高距离：取绝对值
    var distX = Math.abs(e.clientX - startX)
    var distY = Math.abs(e.clientY - startY)
    // 往右上方拖动：
    if (e.clientX > startX && e.clientY < startY) {
      targetDiv.style.width = targetDivWidth + distX + 'px'
      targetDiv.style.height = targetDivHeight + distY + 'px'
    }
    // 往左下方拖动：
    if (e.clientX < startX && e.clientY > startY) {
      targetDiv.style.width = (targetDivWidth - distX) + 'px'
      targetDiv.style.height = (targetDivHeight - distY) + 'px'
    }// 往右下方拖动：
    if (e.clientX > startX && e.clientY > startY) {
      targetDiv.style.width = (targetDivWidth + distX) + 'px'
      targetDiv.style.height = (targetDivHeight + distY) + 'px'
    } // 往左上方拖动：
    if (e.clientX < startX && e.clientY < startY) {
      targetDiv.style.width = (targetDivWidth - distX) + 'px'
      targetDiv.style.height = (targetDivHeight - distY) + 'px'
    }
   
  }

  document.onmouseup = function () {
    document.onmousemove = null
  }
}mounted: function () { },

刚开始实习就让我写项目，我真的不会，这个月都是边写边百度的。大佬们有vue+ts的学习视频推荐吗？谢谢大佬们

Answer 1

el: HTMLDivElement

var targetDiv = document.getElementById('eagleMapContainer') as HTMLElement