2021-04-13 VUE 一些偏门插件

第一个 原型进度条

imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

https://madewith.cn/27](https://madewith.cn/27
Vue Radial Progress 
<template>
  <radial-progress-bar 
                :diameter="150"     //直径
                :completed-steps="90"    // 已经完成
                :total-steps="100"          // 总完成数
                innerStrokeColor="#0D2B4E"      // 没完成的颜色
                startColor="red"                // 完成开始的颜色
                stopColor="green"            // 完成结束的颜色
                strokeLinecap="none"       // 进度条两端是否有圆
                :animate-speed="1000"     // 动画熟时间
    >
   <p>Total steps: {{ totalSteps }}</p>
   <p>Completed steps: {{ completedSteps }}</p>
  </radial-progress-bar>
</template>

<script>
import RadialProgressBar from 'vue-radial-progress'

export default {
  data () {
    return {
      completedSteps: 0,
      totalSteps: 10
    }
  },

  components: {
    RadialProgressBar
  }
}
</script>