点击跳转鼠标判断

效果展示

效果说明

1.点击或者鼠标移动位置很小的时候可以跳转
2. 鼠标移动浮动过大不可跳转，且需要可以选中内容（便于复制）

代码展示

 <n-grid-item
            v-for="(item, index) in searchData.list"
            :key="index"
            class="outpatient-item"
            @mousedown="mousedownFn($event)"
            @mouseup="mouseupFn($event, item)"
          >
            <PatientCard :data="item" @label-saved="handleUpdateValue" />
 </n-grid-item>

<script setup lang="ts">
  const x = ref(0); // 定义初始化x坐标
  const y = ref(0); // 定义初始化y坐标
  const newx = ref(0); // 定义移动x坐标
  const newy = ref(0); // 定义移动y坐标
  const trueX = ref(false);  // 定义x坐标移动浮动是否在限定范围
  const xScope = ref(0);  // 定义x坐标移动距离
  
  // 鼠标按下
  function mousedownFn(event) {
    let e = event;
    x.value = e.pageX;
    y.value = e.pageY;
  }
  // 鼠标抬起
  async function mouseupFn(event, patInfo) {
    let e = event;
    newx.value = e.pageX;
    newy.value = e.pageY;
    xScope.value = x.value - newx.value; // 计算x轴移动距离
    // 设置x轴移动距离允许值
    if (3 >= xScope.value && xScope.value >= -3) {
      trueX.value = true;
    } else {
      trueX.value = false;
    }
   // 点击左键 e.button == 1 / 右键2 /中键 4
    if (trueX.value && e.button !== 2 && e.button !== 4) {
      // 位置相同的操作或者相差在-3 至 3 之间可以跳转
      toPatientView(patInfo); //跳转封装方法
      await recentLog({    // 业务代码
        visitId: patInfo.patVisitId,
        patId: patInfo.patId,
      });
    } else if (!trueX.value && e.button === 2 && e.button === 4) {
      // 位置不同的操作 且移动距离大于-3至3 ， 不跳转
      return false;
    }
  }
 </script>