有没有大佬帮我改一下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