ant-design-vue/components/progress/demo/dynamic.md
2018-04-03 14:14:38 +08:00

812 B

#### 动态展示 会动的进度条才是好进度条。 #### Dynamic A dynamic progress bar is better.
<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 {
    data () {
      return {
        percent: 0,
      }
    },
    methods: {
      increase() {
        let percent = this.percent + 10;
        if (percent > 100) {
          percent = 100;
        }
        this.percent = percent
      },
      decline() {
        let percent = this.percent - 10;
        if (percent < 0) {
          percent = 0;
        }
        this.percent = percent
      },
    },
  }
</script>