显示效果

image.png
2.效果代码下载

简介

<seekbar> 组件用来创建带滑动进度条的组件。
基本用法

  1. <template>
  2.   <seekbar class="seekbar" />
  3. </template>
  5. <script>
  6. export default {
  7. };
  8. </script>
  10. <style scoped>
  11. .seekbar {
  12.   width: 424px;
  13.   height: 100px;
  14. }
  15. </style>

子组件

<seekbar> 不支持子组件。

属性

key 类型 描述 默认值 备注
min number 最小值 0 需>=0
max number 最大值 100 需>min
step number 步长，值必须大于0，并可被(max - min)整出 1 >0
value number 当前值 0
active-color Color 前景色(已拖动的进度条) #108ee9
background-color Color 进度条背景色 #dddddd
track-size number 进度条高度 4
handle-size number 滑块大小 22
handle-color Color 滑块颜色 #108ee9
handle-inner-color Color 滑块内环颜色 transparent

样式

通用样式

支持所有通用样式

  • 盒模型
  • flexbox 布局
  • position
  • opacity
  • background-color

查看 组件通用样式

事件

  • 通用事件 支持所有通用事件。
  • changing. 拖动过程中触发的事件，会不断触发。
    • @param value: 当前值。
  • change. 完成一次拖动后触发。
    • @param value: 当前值。