湖南卫视快乐大本营直播在线观看,江户川乱步小说下载,90号汽油价格
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论