更新记录
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
查看更多
平台兼容性
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