import Vue from 'vue';
import {ProgressBar} from 'vue-ydui/dist/lib.rem/progressbar';
/* 使用px：import {ProgressBar} from 'vue-ydui/dist/lib.px/progressbar'; */
Vue.component(ProgressBar.name, ProgressBar);<template>
<div>
<div style="width: 120px;height: 120px;">
<yd-progressbar :progress="progress1" trailWidth="4">{{progress1 * 100}}%</yd-progressbar>
</div>
<div style="width: 120px;height: 120px;">
<yd-progressbar
:progress="progress2"
trailWidth="2"
strokeWidth="4"
strokeColor="#B2B2B2"
trailColor="#FE5D51"
fillColor="#EAEAEA"
>{{progress2 * 100}}%</yd-progressbar>
</div>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
progress1: 0.1,
progress2: 0.4
}
}
}
</script>通过:progress参数设置所占百分比，:progress取值范围为0-1。
<template>
<div>
<yd-progressbar :progress="progress3" trailWidth="6">
<yd-countup :endnum="progress3 * 100" :duration="1" suffix="%"></yd-countup>
</yd-progressbar>
<yd-button size="large" @click.native="progress3 = 0.8">设置为80%</yd-button>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
progress3: 0.3
}
}
}
</script>通过yd-countup组件可以使数字动起来，yd-countup组件使用方法请参看
<template>
<yd-progressbar type="line" :progress="progress4" trailWidth="4" trailColor="#FE5D51"></yd-progressbar>
</template>
<script type="text/babel">
export default {
data() {
return {
progress4: 0.6
}
}
}
</script>设置type="line"参数即为线形进度条。