时间:2021-05-26
本文实例为大家分享了vue实现进度条效果的具体代码,供大家参考,具体内容如下
一、效果图
二、代码
progress-bar.vue
<template> <div class="vue-progress-bar default-theme"> <div class="vue-progress-bar__tip"> <span class="vue-progress-bar__tiplabel">{{label}}</span> <span class="vue-progress-bar__tiptext">{{text}}</span> </div> <div class="vue-progress-bar__outer"> <div class="vue-progress-bar__inner" :style="barStyle"></div> </div> </div></template><script> export default { props:{ label:String, text:String, height:{ type: Number, default: 0, required: true, validator: val => val >= 0 }, color: { type: String, default: '' }, percentage:{ type: Number, default: 0, required: true, validator: val => val >= 0 && val <= 100 } }, computed:{ barStyle() { const style = {}; style.width = this.percentage + '%'; style.height = this.height + 'px'; style.backgroundColor = this.color; return style; } } }</script><style lang="scss" scoped> .vue-progress-bar.default-theme{ .vue-progress-bar__outer { background: #eee; } } .vue-progress-bar { .vue-progress-bar__tiptext { float: right; } }</style>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了vue实现拖拽进度条的具体代码,供大家参考,具体内容如下组件代码:+{{per}}%-/**min进度条最小值*max进度条最大值*v-mo
本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下微信小程序自定义组件官方教程环形进度条的组件已经放在github上环形进度条效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析:类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时
NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画。NProgress.js是轻量级的进度条组件,使用简便,可以很
分享一个最近写的进度条滑动组件,以前都是用jq写,学会了vue,尝试着拿vue来写觉得非常简单,代码复用性很强!效果图如下:调用组件如下:{{scale*100