更新记录

3.0.1(2024-03-07) 下载此版本

  • 修复部分平台初始化失败问题
  • 新增兼容web端(大部分浏览器)

3.0.0(2023-11-29) 下载此版本

+本次更新采用CSS方式实现,不再使用canvas +新版不再提供vue2语法版本,仅支持vue3语法 +canvas版本在部分平台表现有差异性,将不再更新维护 +web端表现存在差异性,建议使用SVG实现或选择旧版

2.0.0(2023-05-17) 下载此版本

2.0.0(2023-05-17)

  • 应各位需求,重写组件。时间紧迫,有点仓促
  • 本次更新,支持任意角度,任意调整,优化核心算法
  • 感谢各位的支持,如有问题请联系本人vx:undefind_404
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

参数配置

组件参数:config 说明
canMove 是否可滑动
size 元素直径(rpx)
start 起始位置(0-100 0为12点钟方向)
arcLength 弧长(0-100 如:50为半圆)
modelValue 滑块当前位置(百分比)
bgColor 弧线底部线背景色
actColor 弧线活动色
dotColor 滑块背景色
dotSize 滑块大小(rpx)
lineWidth 弧线宽度(rpx)
showDot 是否显示滑块
showActLine 是否显示动态弧线

使用示例

<arc-slider v-model="nowRatio">
  <view>{{ nowRatio }}<view/>
<arc-slider/>
const nowRatio = ref<number>(50)
多端支持请自行测试
可扫码进小程序体验 主要针对小程序端实现
有问题咨询本人,不限于创意需求,本插件仅为基础版本
如果对您有帮助 请记得点点star

隐私、权限声明

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

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

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

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问