ts 下使用 interactjs 的时候,事件类型该如何定义 InteractEvent
一、问题
interactjs
是一个很好用的给元素添加拖动事件的插件,它可以实现如下的效果。
其官网是 https://interactjs.io/
vite+ts+vue3 项目中用到了 interactjs 这个库,但在定义方法参数的时候,不知道该如何定义它的 event 类型了,像这样:这个方法中的 event 到底是什么类型
二、寻找解决办法
查询了官方的文档,加上查看它的源码,终于找到了这个 event 正确的定义。
官方文档: https://interactjs.io/docs/events/
正确的定义应该是 InteractEvent
这个 event 名。
知道了这个名,又去源码中搜索它,找到了它的定义位置:
三、解决
将这个 InteractEvent
引入之后直接定义方法中的 event 类型,发现不可以,提示如下:
意思是 这个引入的 InteractEvent
并不是一种类型,而是一个 namespace
当再回去查看关于 InteractEvent
的定义的时候能看到,我们应该使用它内部的 InteractEvent
class, 也就是 InteractEvent.InteractEvent
像上面这样才算正常,当使用 event.
的时候也能正常的提示它内部的属性值了
四、部分代码
<script lang="ts" setup>
import interact from 'interactjs'
import InteractEvent from '@interactjs/core/InteractEvent'
onMounted(() => {
interact(refDeviceTag.value)
.draggable({
// enable inertial throwing
inertia: true,
// 是否保持 dom 元素在其父 dom 中
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})
],
// enable autoScroll
autoScroll: true,
listeners: {
start: ()=>{}, // 拖动开始
move: dragMoveListener, // 拖动中
end: dragMoveListener // 移动结束事件
}
})
}
function dragMoveListener(event: InteractEvent.InteractEvent){
if (props.isInBigCardMode){
positionX.value = positionX.value + event.dx / 0.9
positionY.value = positionY.value + event.dy / 0.9
} else {
positionX.value = positionX.value + event.dx
positionY.value = positionY.value + event.dy
}
emit('update-location', {
index: props.tagIndexInArray,
position: {left: positionX.value, top: positionY.value}
})
}