Vue 3 的可定制径向(圆形)进度组件 - vue3-radial-progress

Vue 3 的可定制径向(圆形)进度组件 - vue3-radial-progress
插件名称 vue3-radial-progress
发布时间 2022年1月5日
插件作者 jairoblatt

这是 wyzantinc 的vue-radial-progress的 Vue 3 版本,它使您能够生成带有渐变和动画的径向进度条。

安装和下载:

# Yarn
$ yarn add vue3-radial-progress

# NPM
$ npm i vue3-radial-progress

使用:

1. 导入并注册径向进度组件。

import { createApp } from 'vue';
import RadialProgress from "vue3-radial-progress";
const app = createApp(App);
// 局部
export default {
  components: {
    RadialProgress
  }
}
// 全局
app.use(RadialProgress);

2. 生成一个基本的径向进度条。

<template>
  <radial-progress-bar 
    :diameter="200"
    :completed-steps="completedSteps"
    :total-steps="totalSteps">
   <p>Total steps: {{ totalSteps }}</p>
   <p>Completed steps: {{ completedSteps }}</p>
  </radial-progress-bar>
</template>
import { ref, defineComponent } from "vue";
export default defineComponent({
  setup(){
    const completedSteps = ref(0);
    const totalSteps = ref(10);
    return {
        completedSteps,
        totalSteps
      }
  }
})