更新记录
0.0.1(2024-09-03)
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.26 app-vue app-uvue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
lime-arc-slider 环形选择器
- lime-arc-slider 环形选择器可用于音量,色相环等场景的圆形选择器,兼容uniapp/uniappx(ios,web,安卓)
安装
插件市场导入即可
代码演示
基础使用
通过设置v-model
双向绑定值
<l-arc-slider v-model="value"></l-arc-slider>
const value = ref(50)
色环
通过设置v-model:color
双向绑定色值,仅支持hex
、rgb
,通过设置is-hue
为true
开启色环。
<l-arc-slider v-model:color="color" :is-hue="true"></l-arc-slider>
const color = ref('#ff0000')
插件标签
- 默认 l-arc-slider 为 component
- 默认 lime-arc-slider 为 demo
代码位于 uni_modules/lime-arc-slider/components/lime-arc-slider/lime-arc-slider.uvue
<lime-arc-slider/>
关于vue2的使用方式
- 插件使用了
composition-api
, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可.
- 注意未在vue2上测试过,理论是可以使用。如有问题可以反馈。
API
Props
参数 |
说明 |
类型 |
默认值 |
v-model |
当前值 |
number |
- |
v-model:color |
当前色值 |
string |
- |
v-model:range |
当前双滑块值 |
number[] |
[] |
size |
尺寸 |
number |
300 |
lineCap |
线段的末端样式 |
string |
round |
strokeWidth |
活动弧线宽度 |
number |
30 |
strokeColor |
活动弧线颜色 |
string |
#ffb400 |
trailWidth |
轨道弧线宽度 |
number |
30 |
trailColor |
轨道弧线颜色 |
string |
#f5f5f5 |
dotSize |
滑块大小 |
number |
24 |
dotBgColor |
滑块背景色 |
string |
white |
dotBorderColor |
滑块描边背景色 |
string |
white |
dotBorderWidth |
滑块描边宽度 |
number |
2 |
max |
最大值(总长) |
number |
360 |
step |
步长 |
number |
1 |
isHue |
是否为色相 |
boolean |
false |
isRange |
是否为范围选择器(对色环无效) |
boolean |
false |
Events
事件名 |
说明 |
回调参数 |
change |
当前分值变化时触发的事件 |
_ChangeRes: { value: any, diff : number |
null }_ |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。