<progress-bar ref="aa"></progress-bar> <progress-bar leftBg="greenyellow" bgc="#ccc" ballBgc="red"></progress-bar> <progress-bar leftBg="linear-gradient(to right, yellow, pink)" bgc="#ccc" ballBgc="red"></progress-bar> <progress-bar leftBg="yellow" bgc="#ccc" ballBgc="red"></progress-bar> <progress-bar leftBg="greenyellow" bgc="#ccc" ballBgc="rgba(255,0,0,0.2)"></progress-bar> <progress-bar leftBg="greenyellow" bgc="#ccc" ballBgc="red" :max="max" :value="value" :min="min" @pbar-drag="drag" @pbar-seek="seek"></progress-bar>
组件props
leftBg：进度条已划过部分背景色
bgc：进度条还未划过部分背景色
ballBgc：滑块背景色
width：进度条占父组件的宽度百分比，传百分比数值
height：进度条高度，传像素值
max：进度条最大值
min：最小值
value：当前值
事件
pbar-drag: 拖动进度条时触发，回传value值和百分比值
pbar-drag: 点击进度条某一位置时触发，回传value值和百分比值
总结
以上所述是小编给大家介绍的Vue的事件响应式进度条组件实例详解，希望对大家有所帮助，如果大家哟任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: