ant-design-vue/components/progress/demo/dynamic.md

47 lines
814 B
Markdown
Raw Normal View History

2018-04-03 06:14:38 +00:00
<cn>
#### 动态展示
会动的进度条才是好进度条。
</cn>
<us>
#### Dynamic
A dynamic progress bar is better.
</us>
```html
<template>
<div>
<a-progress :percent="percent" />
<a-button-group>
<a-button @click="decline" icon="minus" />
<a-button @click="increase" icon="plus" />
</a-button-group>
</div>
</template>
<script>
export default {
2019-09-28 12:45:07 +00:00
data() {
2018-04-03 06:14:38 +00:00
return {
percent: 0,
2019-09-28 12:45:07 +00:00
};
2018-04-03 06:14:38 +00:00
},
methods: {
increase() {
let percent = this.percent + 10;
if (percent > 100) {
percent = 100;
}
2019-09-28 12:45:07 +00:00
this.percent = percent;
2018-04-03 06:14:38 +00:00
},
decline() {
let percent = this.percent - 10;
if (percent < 0) {
percent = 0;
}
2019-09-28 12:45:07 +00:00
this.percent = percent;
2018-04-03 06:14:38 +00:00
},
},
2019-09-28 12:45:07 +00:00
};
2018-04-03 06:14:38 +00:00
</script>
```