Skip to content

NsRotaryDial 复古拨盘输入

一个复古风格的拨盘输入器。

🎮 如何使用(新手教程)

  1. 选中数字:用鼠标按住你想输入的数字圆孔。
  2. 顺时针拨动:按住不放,沿着圆盘边缘顺时针向下拉。
  3. 触碰挡板:直到你按住的数字圆孔碰到右下角的“黑色金属挡板”。
  4. 松手录入:看到进度达到 100% 后松开鼠标,拨盘会自动回弹,数字录入成功。
  5. 注意:如果没拨到底就松手,拨盘会直接弹回,输入无效。

组件特性

  • 物理模拟:模拟老式电话的旋转拨盘,必须手动旋转到挡板处。
  • 强制专注:旋转到一半松手会触发 springBack 效果,前功尽弃。
  • 实时反馈:新增了进度环和百分比显示,让你清晰看到距离成功还有多远。
摩擦力:

Nonsensical 虚拟拨号通话系统

正在进入非正常通信链路,请拨号

0 / 11
等待拨号...
按住数字
顺时针拨到底
1
2
3
4
5
6
7
8
9
0
正在分配线路通道...
Dragging|Returning|Ready

Props

  • modelValue: string | number(当前输入值)
  • title: string(标题文案)
  • friction: number(摩擦力,0-1,数值越大回弹越慢,默认 0.5
  • springBack: boolean(是否开启强力回弹,默认 true

Events

  • input(digit): 成功输入一位数字时触发
  • fail(reason): 拨号失败(如未拨到底)时触发

Built with VitePress