更新记录

0.1.13（2024-09-24） 下载此版本

1. 修复初始化时滑块定位不准的问题

0.1.12（2024-08-23） 下载此版本

1. 更新 debug 工具

0.1.11（2024-08-23） 下载此版本

1. 更新示例

平台兼容性

zui-knob-basic 基础款旋钮

一款旋钮模拟组件。旋转开关，调节器。可用于控制台灯色温控制、空调温度控制、音量控制。

特性：

1. 支持 v-model 绑定
2. 支持限位设置，控制转动范围
3. 支持转动增量值
4. 支持转动方向事件
5. 支持值映射。将角度值映射到指定范围，并可设置转换精度

🍓 立即使用

<zui-knob-basic @change="onChange" @direction="onDirectionChange" />

在线演示

💻 点我在浏览器里预览 https://uni.imgozi.cn/zui-knob-basic/

PS: 启动浏览器预览需要打开手机模器

📱 扫码体验

🍊 参数

theme

{
  base: '底图.png',
  handle: '旋钮.png',
}

🍒 事件

以下所列事件按触发顺序列出

@active=onActive() => void

开始操作时触发

// 无参数

@change=on Change(chg) => void

摇杆推动时触发，事件触发间隔可通过参数 eventFreq 调整

旋转角度计量以右方为起点，顺时针方向

{
  direction: 'top',   // 方向
  degree: 0,   // 角度, [0, 360]
  deleta: 720,  // 累计旋转度数
}

direction 取值范围: 'clockwise' | 'counterclockwise'

@direction=onDirection Change(chg) => void

当方向发生变化时触发

{
  from: 'top', // 变化之前的方向
  to: 'top-right', // 变化之后的方向, 即当前方向
}

@deactive=onDeactive() => void

结束操作时触发

// 无参数

🍓 支持

如果组件对您有帮助，请不吝打赏。肥宅快乐水🥤是创作动力！🥤🥤🥤

🍓🍇🍉 喜欢就打赏一下 🍒🍑🥭