源代码
<template>
<div>
<h2>ProgressBar Style</h2>
<div style="margin-bottom:20px">
<ProgressBar :value="30" class="mybar"></ProgressBar>
</div>
<div style="margin-bottom:20px">
<ProgressBar :value="20" barCls="c1"></ProgressBar>
</div>
<div style="margin-bottom:20px">
<ProgressBar :value="40" barCls="c2"></ProgressBar>
</div>
<div style="margin-bottom:20px">
<ProgressBar :value="50" barCls="c3"></ProgressBar>
</div>
<div style="margin-bottom:20px">
<ProgressBar :value="60" barCls="c4"></ProgressBar>
</div>
<div style="margin-bottom:20px">
<ProgressBar :value="80" barCls="c5"></ProgressBar>
</div>
<div style="margin-bottom:20px">
<ProgressBar :value="100" barCls="c6"></ProgressBar>
</div>
</div>
</template>
<script>
export default {};
</script>
<style>
.mybar {
height: 1px;
background: #ddd;
}
.mybar .progressbar {
border: 0;
}
.mybar .progressbar-value {
background: red;
}
</style>