进度条播放器

基础示例

基础进度条播放，根据设定时间平滑改变进度条宽度实现进度播放

显示进度百分比

有时我们想要将当前百分比显示在进度条上，可以通过progressTextPosition属性设置：

颜色分割

根据数据中的单个字段（数值）设定区间分割进度条的颜色，支持分别以两种颜色绘制填充色和背景预览色

分割颜色 & 实时提示框 beta

分割颜色与实时提示框，在进度条上添加一个提示框，

由于提示框内容数据改变时，会导致提示框宽度发生变化 => 提示框的定位会偏移，目前不太完善，后续优化。

高性能模式

由于分割颜色进度条在改变进度时会导致浏览器重绘，故增加了高性能模式的方法，但这种方式 牺牲 了背景预览色可以自定义的功能，使用 遮罩 替代了 背景预览色

API

Props

属性名	必填	说明	类型	默认值
data	是	数据	any[]	[]
duration	否	动画移动到下个点的过渡时间	number	1000
performance	否	开启高性能模式	boolean	false
has-real-time-tip-box	否	是否显示实时提示框	boolean	false
progress-bac-color	否	未开启颜色分割时进度条背景色	string	"#ccc"
progress-fill-color	否	未开启颜色分割时进度条填充色	string	"#409eff"
is-split	否	是否开启颜色分割进度条	boolean	false
split-config	否	分割配置，见下表	SplitConfig	——
split-fields-interval	否	分割字段区间范围eg: "[0,10)" => 10 < a >= 0	string	""
progressTextPosition	否	进度百分比文字	null	ProgressTextPosition

Events

事件名	描述说明	类型
handle-play	动画播放时根据设置的过渡时间定时返回当前点的索引和数据	Function
skip-progress	返回鼠标点击进度条时当前点的索引和数据	Function

Slots

插槽名	说明	插槽道具
controlBtn	控制按钮（播放、暂停、重播）	play：播放按钮显示状态, pause：暂停按钮显示状态refresh：重播按钮显示状态
currentTip	实时提示框内容	——

Exposes

方法名	描述	类型
initProgressBar	初始化进度条	Function
play	播放	Function
pause	暂停	Function
refresh	重播	Function

Methods

方法名	描述	类型
splitFunMethods	按照设定颜色计算切割区间结果	Function: (data: any,interval: string,field: string,inRangeColor: string,outRangeColor: string) => void

Types

SplitConfig

属性名	说明	类型	默认值
splitFields	用于分割颜色的属性	string	——
inRangeColor	处于设置区间内的进度条填充颜色	string	"blue"
outRangeColor	不在设置区间内的进度条填充颜色	string	"red"
outRangeBacColor	不在设置区间内的进度条背景颜色	string	"rgba(255,0,0,0.3)"
inRangeBacColor	处于设置区间内的进度条背景颜色	string	"rgba(0,0,255,0.3)"

ProgressTextPosition

属性名	说明	类型
null	不显示进度百分比文字	string
follow	跟随在当前进度左侧	string
inside-left	固定在进度条内部的最左侧	string
inside-right	固定在进度条内部的最右侧	string
outside-right	固定在进度条外部的右侧	string