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

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

有偿一瓶快乐水,大瓶的!就改两个方法的格式就好。谢谢大佬!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的学习视频推荐吗?谢谢大佬们


回答:

el: HTMLDivElement

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

以上是 有没有大佬帮我改一下js转ts格式,有偿 的全部内容, 来源链接: utcz.com/p/936543.html

回到顶部