如何让Vuetify环形进度条在非100的中间值时显示完成状态？

Vuetify的v-progress-circular组件默认以0-100的百分比作为进度依据，只有当value达到100时才会填满环形。要实现自定义最大值（比如10、20）的倒计时填满效果，核心思路是将自定义范围内的当前值按比例转换为0-100的百分比。

具体实现步骤 #

对于每个倒计时项，计算转换后的进度值：(当前值 / 自定义最大值) * 100，把这个结果传给v-progress-circular的value属性即可。这样当当前值等于自定义最大值时，转换后的数值就是100，环形会自动填满；当前值为0时，转换后数值为0，环形清空。

修改后的完整代码 #

JavaScript部分

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      second_10: 10,
      second_20: 20,
      second_100: 100,
      interval_10: null,
      interval_20: 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_20);
      clearInterval(this.interval_100)
    }
  }
})

HTML部分

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/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="mt-3"
            >
            {{ 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) * 100"
            color="success"
            class="mt-3"
            >
            {{ second_10 }}
          </v-progress-circular>
        </v-col>
        <v-col>
          <v-btn small @click="countDown(20)">start timer</v-btn>
          <v-progress-circular
            :rotate="360"
            :size="50"
            :width="5"
            :value="(second_20 / 20) * 100"
            color="success"
            class="mt-3"
            >
            {{ second_20 }}
          </v-progress-circular>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

关键修改点 #

• 对于最大值为10的进度环，将:value从second_10改为(second_10 / 10) * 100
• 对于最大值为20的进度环，将:value从second_20改为(second_20 / 20) * 100
• 最大值为100的进度环无需修改，保持原有逻辑即可

这种方式适用于任何10的倍数的最大值（30、50等），只需将分母替换为对应的最大值即可，完全满足需求。

内容的提问来源于stack exchange，提问作者Neha Soni