更新记录
1.0.6(2025-06-02)
修复试用不显示BUG
1.0.5(2025-06-02)
修复引用报错BUG
1.0.4(2025-06-02)
修改css引入
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | √ | - | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
微信小程序开发者工具会错位,真机正常!!!
微信小程序开发者工具会错位,真机正常!!!
微信小程序开发者工具会错位,真机正常!!!
重要的事情说三遍
转盘APIs
属性 | 说明 | 类型 | 默认值/可选择 |
---|---|---|---|
bgColors | 背景颜色集合,按顺序设置背景颜色 | Array\ |
见下方bgColors |
textStyle | 文本样式,注意:在小程序端fontSize使用‘rpx’不生效 | object: {color: string,fontSize: string} | {color: '#fff',fontSize: '16px'} |
options | 转盘项,字段见下方options | Array\<object> | - |
size | 转盘直径大小 | number | string | 700rpx |
duration | 转盘旋转持续时长,单位秒(s) | number | 8 |
turns | 转盘旋转圈数 | number | 20 |
resultIndex | 自定义转盘结果,结果为options数组的下标index | number | - |
pointerSize | 自定义指针大小 | number | string | 90rpx |
bgColors默认值
['#dd2c00', '#ff3d00', '#ff7043', '#ff6d00', '#ff9100', '#ffa726', '#ffab00', '#ffc400', '#ffca28', '#ffd600', '#ffea00', '#ffee58', '#aeea00', '#c6ff00', '#d4e157', '#64dd17', '#76ff03', '#9ccc65', '#00c853', '#00e676', '#66bb6a', '#00bfa5', '#1de9b6', '#26a69a', '#00b8d4', '#00e5ff', '#26c6da', '#0091ea', '#00b0ff', '#29b6f6', '#2962ff', '#2979ff', '#42a5f5', '#304ffe', '#3d5afe', '#5c6bc0', '#6200ea', '#651fff', '#7e57c2', '#aa00ff', '#d500f9', '#ab47bc', '#c51162', '#f50057', '#ec407a', '#d50000', '#ff1744', '#ef5350']
options字段
interface options {
name: string; // 每一项显示名称
viewRatio?: number; // 每一项显示占比,默认为1,1则表示占用1格,假设options有8项,1则表示该项显示1/8格
ratio?: number; // 选中占比,默认为viewRatio值,不设置,则与viewRatio一致,假设options有8项,1则表示该项被选中概率为1/8
bgColor?: string; // 背景颜色,默认值为bgColors[index],优先级高于API的bgColors,可单独设置转盘项的背景色
textStyle?: object: {color: string,fontSize: string}; // 显示名称文本样式,默认值{ color: '#fff', fontSize: '16px' },优先级高于API的textStyle, 仅支持color和fontSize的设置。注意:在小程序端fontSize使用‘rpx’不生效
}
// 可添加需要的字段,回调事件会返回
事件
注意:转盘后开始无法自定义结果
事件名称 | 说明 | 回调参数 |
---|---|---|
start | 转盘开始时回调。注意:转盘后开始无法自定义结果 | - |
change | 转盘变化时回调 | option字段值 |
result | 转盘结束后回调转盘结果 | option字段值 |
Solt
名称 | 说明 |
---|---|
pointer | 指针插槽,可自定义指针 |
使用示例
<er-turntable :options="list" @change="onChange" @result="onResult"/>