Vuetify 中间百分比值的循环进度条如何完成？

Question

我正在使用 Vuetify 的 progress 循环组件，它采用

value

道具，这是当前进度的百分比，当百分比值达到 100 时，循环完成。
我的用例是创建一个倒计时，我的最大百分比值为 10，这意味着该圆应该在值为 10 时显示已完成。但我想不出一种方法来完成 10% 进度的圆。

这有可能吗？

这是我的示例代码，我希望我的 10 值圆像 100 值圆一样被填充。

注- 10是一个例子，值可以是20、30等

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      second_100: 100,
      second_10: 10,
      interval_10: null,
      interval_100: null,
    }
  },
  methods: {
    countDown(val) {
      this[`interval_${val}`] = setInterval(() => {
         if(this[`second_${val}`] == 0) {
           this[`second_${val}`] = val
         } else {
           this[`second_${val}`]--;
         }
      }, 1000)
    },
    stopCountDown() {
      clearInterval(this.interval_10);
      clearInterval(this.interval_100)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"/>
<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-row>
        <v-col cols="12" align="center">
          <v-btn small color="error" @click="stopCountDown()">Stop Timer</v-btn>
        </v-col>
        <v-col>
          <v-btn small @click="countDown(100)">start timer</v-btn>
          <v-progress-circular
            :rotate="360"
            :size="50"
            :width="5"
            :value="second_100"
            color="success"
            class="ms-4"
            >
            {{ second_100 }}
          </v-progress-circular>
        </v-col>
        <v-col>
          <v-btn small @click="countDown(10)">start timer</v-btn>
          <v-progress-circular
            :rotate="360"
            :size="50"
            :width="5"
            :value="second_10"
            color="success"
            class="ms-4"
            >
            {{ second_10 }}
          </v-progress-circular>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Answer 1

只需将您的值乘以 10，组件就会将其视为 100。

例子：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      second_100: 100,
      second_10: 10,
    }
  },
  methods: {
    countDown(val) {
      setInterval(() => {
         if(this[`second_${val}`] == 0) {
           this[`second_${val}`] = val
         } else {
           this[`second_${val}`]--;
         }
      }, 1000)
    },
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"/>
<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-row>
        <v-col>
          <v-btn small @click="countDown(100)">start timer</v-btn>
          <v-progress-circular
            :rotate="360"
            :size="50"
            :width="5"
            :value="second_100"
            color="success"
            class="ms-4"
            >
            {{ second_100 }}
          </v-progress-circular>
        </v-col>
        <v-col>
          <v-btn small @click="countDown(10)">start timer</v-btn>
          <v-progress-circular
            :rotate="360"
            :size="50"
            :width="5"
            :value="second_10 * 10"
            color="success"
            class="ms-4"
            >
            {{ second_10 }}
          </v-progress-circular>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>