更新记录

0.0.6（2025-12-09）

  • fix: 修复类型问题

0.0.5（2025-04-26）

  • feat: 兼容uniappx 鸿蒙next
  • bug: uniappx 鸿蒙next createCanvasContextAsync问题

0.0.4（2025-02-14）

  • fix: uniappx ios createCanvasContextAsync问题
查看更多

平台兼容性

uni-app(4.83)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ - 5.0 √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ - - - - - - - - - -

uni-app x(4.81)

Chrome Safari Android iOS 鸿蒙 微信小程序
√ √ 5.0 √ √ √

其他

多语言 暗黑模式 宽屏模式
× √ ×

lime-arc-slider 环形选择器

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

文档链接

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

安装方法

  1. 在 uni-app 插件市场中搜索并导入 lime-arc-slider。
  2. 首次导入后可能需要重新编译项目。

代码演示

基础用法

通过 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 为组件标签。
  • 默认 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 | null }

支持与赞赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。