vue圆形进度条组件_一个Vue.js组件来绘制动画的圆形进度条

vue圆形进度条组件

Vue圈进度 (vue-circle-progress)

A Vue.js component to draw animated circular progress bars.

一个Vue.js组件，用于绘制动画的圆形进度条。

Draw animated progress circle like below.

如下绘制动画进度圈。

安装 (Install)

// For Vue.js 2.0+
npm install vue2-circle-progress

用法 (Usage)

1. Import the module

   导入模块

2. Register it as a component as you would any other Vue component

   与其他任何Vue组件一样，将其注册为组件

3. Use it within your template

   在模板中使用它

例 (Example)

<template>
  <div id="app">
    <p>
      A Vue.js component to draw animated circular progress bars!
    </p>
      <vue-circle
        :progress="50"
        :size="100"
        :reverse="false"
        line-cap="round"
        :fill="fill"
        empty-fill="rgba(0, 0, 0, .1)"
        :animation-start-value="0.0"
        :start-angle="0"
        insert-mode="append"
        :thickness="5"
        :show-percent="true"
        @vue-circle-progress="progress"
        @vue-circle-end="progress_end">
          <p>Slot!</p>
      </vue-circle>
  </div>
</template>

<script>
  import VueCircle from 'vue2-circle-progress'
  export default {
    components: {
      VueCircle
    },
    data(){
      return{
        fill : { gradient: ["red", "green", "blue"] },
      }
    },
    methods:{
      progress(event,progress,stepValue){
        console.log(stepValue);
      },
      progress_end(event){
        console.log("Circle progress end");
      }
    }
  }
</script>

道具 (Props)

Follwing props are used while initialization

初始化时使用以下props

Note : Only progress is a required prop. Others are optional

注意：仅progress是必需的道具。 其他是可选的

大事记 (Events)

Events emitted by the component to the parent.

组件发出给父对象的事件。

方法 (Methods)

Methods you can call on the component.

您可以在组件上调用的方法。

使用方法 (Using Methods)

Methods can be called from your parent component by making use of the special tag "ref".

可以通过使用特殊标记“ ref”从父组件中调用方法。

When you initialize the component add a unique ID to the component using the ref tag, like this

初始化组件时，使用ref标签向组件添加唯一ID，如下所示

<vue-circle ref="myUniqueID"></vue-circle>

Then from your parent Vue instance, you can call the methods by using the following:

然后，可以从父Vue实例使用以下方法调用方法：

this.$refs.myUniqueID.updateProgress(21);
this.$refs.myUniqueID.updateFill("#ff1e41");

发展历程 (Development)

If you feel you can make this better, you are welcome to contribute. I'd love to see your ideas.

如果您觉得可以做得更好，欢迎您提供帮助。 我很乐意看到您的想法。

# install dependencies
npm install

# serve example at localhost:8080
npm run dev

# build any changes made
npm run build

翻译自: https://vuejsexamples.com/a-vue-js-component-to-draw-animated-circular-progress-bars/

vue圆形进度条组件