Skip to content

NsUnclickableConfirmModal 点不到关闭弹窗

这是一个“点不到确认关闭”的弹窗:你越想点“确认关闭”,它越往反方向逃。

✅ 行为说明

  • 弹窗结构是正常的(Header / Content / Footer)
  • “确认关闭”按钮会在弹窗内部逃跑:越靠近逃得越快
  • 关闭方式:按 Esc 或点击遮罩(如果开启遮罩)

🎮 演示

📚 使用方法

vue
<template>
  <button @click="open = true">打开弹窗</button>
  <NsUnclickableConfirmModal v-model:open="open" :dodge-speed="1.2" :safe-distance="26" :detection-radius="70" />
</template>

属性 (Props)

属性名类型默认值说明
openboolean-控制弹窗打开/关闭(可用 v-model:open)。
maskbooleantrue是否显示遮罩层。
closeOnMaskbooleantrue点击遮罩是否关闭。
escClosablebooleantrue是否允许 Esc 关闭。
dodgeSpeednumber1躲避速度倍率,数值越大逃得越快。
safeDistancenumber26与鼠标保持的最小距离(像素)。
detectionRadiusnumber50鼠标进入此范围触发躲避(像素)。

Built with VitePress