vue3 Element 双击事件实现

最新推荐文章于 2024-05-23 10:34:45 发布

古田兔子

最新推荐文章于 2024-05-23 10:34:45 发布

阅读量1k

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Mr_TianSDQ/article/details/131919910

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

该代码段展示了在Vue.js应用中如何处理节点的双击事件。当用户双击同一节点时，它会检查用户的权限来决定是否允许新建操作。如果当前页面支持新建，会打开一个表单；否则，显示警告信息。同时，有一个300ms的时间限制来判断是否为双击事件。

摘要由CSDN通过智能技术生成

const nodeCount = ref(0);
const preNodeId = ref();
const curNodeId = ref();
const nodeTimer = ref();

const doubleClick = async (data: any) => {
  nodeCount.value++;
  console.log("1 nodeCount", nodeCount.value);
  if (preNodeId.value && nodeCount.value >= 2) {
    //双击事件：第一次点击的结点与第二次相同
    curNodeId.value = data.NodeID;
    nodeCount.value = 0;
    if (data.BindReviewTableValue < 0) {
      return;
    }
    console.log("2 curNodeId", curNodeId.value);
    if (curNodeId.value == preNodeId.value) {
      console.log("double click exection");
      //判断是否有权限新建：
      if (!checkPermission(data.NodeCode)) {
        warnMessage("无相应新建权限！");
        return;
      }
      //判断本页面是否支持新建：
      if (creatableFormTypes.includes(data.BindReviewTableValue)) {
        eventId.value = "";
        eventCode.value = data.BindReviewTableValue;
        visible.value = true;
      } else {
        centerDialogVisible.value = true;
      }
      curNodeId.value = null;
      preNodeId.value = null;
      return;
    }
  }
  console.log("3 preNodeId", preNodeId.value);
  preNodeId.value = data.NodeID;
  console.log("4 preNodeId", preNodeId.value);
  nodeTimer.value = setTimeout(() => {
    //300ms内没有第二次点击就把第一次点击的清空
    preNodeId.value = null;
    nodeCount.value = 0;
  }, 300);
  getApplyAllList();
};