Basic progress bar playback, according to the set time smoothly change the progress bar width to achieve progress playback.
Sometimes we want to display the current percentage on the progress bar, which can be set by the progressTextPosition property:
The color of the interval split progress bar is set according to a single field (value) in the data, and the fill color and background preview color are drawn in two colors respectively
Split the color with the real-time prompt box, add a prompt box on the progress bar.
When the content data of the prompt box is changed, the width of the prompt box will change => The positioning of the prompt box will be offset, which is not perfect at present.
Because the split color progress bar will cause the browser to redraw when changing the progress, the method of high-performance mode is added, but this method 'sacrifices' the function of background preview color can be customized, and uses' mask' instead of background preview color
Field Required Description Type Default data true data Array[] duration false the transition time for the animation to move to the next point number1000 performance false enabling High Performance Mode,Applies to split color progress bar only boolean false has-real-time-tip-box false display tooltip booleanfalse progress-bac-color false Progress bar background color when color splitting is not enabled string"#ccc" progress-fill-color false progress bar fills color when color splitting is not enabled string"#409eff" is-split false open the color split progress bar booleanfalse split-config false split the progress bar configuration SplitConfig —— split-fields-interval false division interval rangeeg: "[0,10)" => 10 < a >= 0 string"" progressTextPosition false displays progress percentage text ProgressTextPosition null
Event Description Type handle-play When the animation plays, the index and data of the current point are returned periodically according to the set transition time Functionskip-progress Returns the index and data for the current point when the mouse clicks on the progress bar Function
Slot Name Type Description controlBtn { play: boolean, pause:boolean, replay:boolean }control buttons (Play, pause, replay) currentTip {}tooltip content
Event Description Type initProgressBar init the progress bar player Functionplay control progress bar player to play Functionpause control progress bar player to pause Functionrefresh control progress bar player to replay Function
Event Description Type splitFunMethods Calculate the result of the cut interval according to the set color Function: (data: any,interval: string,field: string,inRangeColor: string,outRangeColor: string) => void
属性名 Description Type Default splitFields a field used to split colors string"" inRangeColor the progress bar within the set interval is filled with color string"blue" outRangeColor progress bars that are not within the set interval are filled with color string"red" outRangeBacColor progress bar background color that is not within the set interval string"rgba(255,0,0,0.3)" inRangeBacColor the progress bar background color within the set interval string"rgba(0,0,255,0.3)"
Field Description Type null not display progress percentage text nullfollow followed to the left of the current progress stringinside-left fixed to the far left inside the progress bar stringinside-right fixed to the far right inside the progress bar stringoutside-right fixed to the right outside the progress bar string