ts 下使用 interactjs 的时候，事件类型该如何定义 InteractEvent

news2024/11/27 18:47:19

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}
    })
}