Progress 进度环
通用参数
所有组件均支持class和style属性,class可以是vue变量也可以是字符串,style可以是字符串或者对象
注:如果是变量需要在class前面加冒号,例如 :class=”mv-button”
概述
progress 可以自定义通用属性class和style,以及percent(百分比),size(进度换大小),strokeWidth(进度环宽度),strokeColor(进度环颜色),bgWidth(背景环宽度),bgColor(背景环颜色)
如何使用
<template>
<Progress :percent.sync="percent"></Progress>
</template>
<script>
import { Progress } from 'mvui';
export default {
components: {
Progress,
}
}
</script>
API
Progress props
属性 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
class | 选填,类名(可以设置icon) | String | - | 任意 |
style | 选填,内联样式,自由设置样式 | [String,Object] | - | 任意 |
percent | 必填,百分比 | Num | 0 | 0-100 |
height | 选填,进度条高度 | Number | 0.1(rem) | 任意 |
stroke-color | 选填,进度环颜色 | String | #007aff | 任意颜色 |
shape | 选填,进度条形状 | String | round | round(圆),square(方) |
bg-color | 选填,背景环颜色 | String | #f3f3f3 | 任意颜色 |
右侧示例代码
<template>
<div class="body-wrapper">
<Hometitle>Progress</Hometitle>
<div class="wrapper-example">
<div class="wrapper-area">
<div class="wrapper-area-title">默认进度条</div>
<div class="wrapper-area-content">
<Progress :percent.sync="percent"></Progress>
</div>
</div>
<div class="wrapper-area">
<div class="wrapper-area-title">高度</div>
<div class="wrapper-area-content">
<Progress :percent.sync="percent" :height="0.05" class="my-progress"></Progress>
</div>
</div>
<div class="wrapper-area">
<div class="wrapper-area-title">颜色</div>
<div class="wrapper-area-content">
<Progress :percent.sync="percent" stroke-color="#23d089" class="my-progress"></Progress>
<Progress :percent.sync="percent" bg-color="#cddc39" class="my-progress"></Progress>
</div>
</div>
<div class="wrapper-area">
<div class="wrapper-area-title">更改进度</div>
<div class="wrapper-area-content">
<div>
<Button @click="add" class="progress-btn-example" shape="round">增加</Button>
<Button @click="minus" class="progress-btn-example" shape="round">减少</Button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Hometitle from './common/hometitle.vue';
import {
Progress,
Button
} from 'mvui';
export default {
components: {
Hometitle,
Progress,
Button
},
data() {
return {
percent: 10
}
},
methods: {
add() {
if (this.percent < 100) {
this.percent = this.percent + 10;
}
},
minus() {
if (this.percent > 0) {
this.percent = this.percent - 10;
}
}
}
}
</script>
<style lang="less">
.progress-btn-example {
padding: 0.03rem 0.5rem;
}
</style>