更新记录

1.0.0(2023-08-25) 下载此版本

首发


平台兼容性

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

滑块选择器,slider ,视频播放进度条等多场景应用,可以用图片滑块,功能高度自定义

支持app,小程序,h5

使用方法

<hao-slider ref="haoSlider"></hao-slider>

属性说明

名称 类型 默认值 描述
imgSliderUrl String 图片链接,有则图片代替滑块
max Number 100 最大值
min Number 0 最小值
value Number 0 当前值
step Number 1 步长,取值必须大于 0,并且可被(max - min)整除
isDisabled Boolean false 是否禁用
sliderHeight Number 8 滑条高度(rpx)
sliderWidth Number null 滑条宽度(rpx),默认100%
sliderBlockSize Number 30 滑块大小(rpx)
sliderRightColor String #e9e9e9 滑块右侧背景色
sliderLeftColor String #2e8857 滑块左侧已选择背景色
sliderBgColor String #ffffff 滑块颜色
sliderBlockShadow String 0 0 16rpx #fff 滑块阴影(当滑块不是图片时有效)
borderRadius String 8rpx 当前值提示窗圆角值(rpx)
tipSize Number 22 value提示的文字大小(rpx)
isSliderTop Boolean false 是否让滑块在滑条上方
topSpacing Number 8 滑块离滑条的间距(isSliderTop为true时有效)
isTip Boolean true 是否显示滑块上方当前值
tipBlockSpacing Number 20 提示值与滑块或滑条的间距

Event 事件

事件名 说明 类型 回调参数
change 点击跳转滑块时 emit 返回当前值
end 结尾时触发 emit
changeing 拖拽滑块时 emit 返回当前值
start 点击滑块时触发 emit

ref事件

获取当前值

let currentTime = this.$refs.haoSlider.getCurrentValue();

隐私、权限声明

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

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

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

许可协议

MIT协议

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