LimeArcSlider 环形选择器

一款用于音量、色相环等场景的环形选择器插件，兼容 uniapp/uniappx。

文档链接

📚 详细文档请访问以下站点：

安装方法

在 uni-app 中搜索并导入 lime-arc-slider。
首次导入后可能需要重新编译项目。

代码演示

基础用法

通过 v-model 双向绑定值。

html

<l-arc-slider v-model="value"></l-arc-slider>

js

const value = ref(50)

色环模式

通过 v-model:color 双向绑定色值（支持 hex 和 rgb），并设置 is-hue 为 true 开启色环模式。

html

<l-arc-slider v-model:color="color" :is-hue="true"></l-arc-slider>

js

const color = ref('#ff0000')

插件标签

默认 l-arc-slider 为组件标签。
默认 lime-arc-slider 为演示标签。

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`

事件

事件名	说明	回调参数
`change`	分值变化时触发	`{ value: any, diff: number

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助

源代码