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)

道具 (Props)

Follwing props are used while initialization

初始化时使用以下props

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

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

Prop Name	Type	Description
progress (required)	Number	Total progress of circle (filled area)
size	Number	Size of circle Default : 200
reverse	Boolean	Reverse animation and arc draw Default:false
line-cap	String	Arc line cap: "butt", "round" or "square" Default: "butt"
fill	Object	The arc fill config. You may specify next: - "#ff1e41" - { color: "#ff1e41" } - { color: 'rgba(255, 255, 255, .3)' } - { gradient: ["red", "green", "blue"] } - { gradient: [["red", .2], ["green", .3], ["blue", .8]] } - { gradient: [ ... ], gradientAngle: Math.PI / 4 } - { gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] } - { image: "http://i.imgur.com/pT0i89v.png" } - { image: imageInstance } - { color: "lime", image: "http://i.imgur.com/pT0i89v.png" } Default: { gradient: ["#3aeabb", "#fdd250"] }
empty-fill	String	Color of the "empty" arc. Only a color fill supported by now Default: "rgba(0, 0, 0, .1)"
animation	Mixed	Animation config. See jQuery animations. You may also set it to false Default: { duration: 1200, easing: "circleProgressEasing" } "circleProgressEasing" is just a ease-in-out-cubic easing
animation-start-value	Number	Default animation starts at 0.0 and ends at specified value. Let's call this direct animation. If you want to make reversed animation then you should set animationStartValue to 1.0. Also you may specify any other value from 0.0 to 1.0 Default: 0.0
start-angle	Number	Initial angle (for 0 value) Default: -Math.PI
insert-mode	String	Canvas insertion mode: append or prepend it into the parent element Default: "prepend"
thickness	Number	Width of the arc. By default it's automatically calculated as 1/14 of size but you may set your own number Default: "auto"
show-percent	Boolean	Show loaded percentage inside circle. If inner-text property is set then percentage will not be shown. Default : true

道具名称	类型	描述
进度(required)	数	圆的总进度(填充区域)
尺寸	数	圆的大小 默认值： 200
逆转	布尔型	反向动画和弧线绘制 默认值： false
线帽	串	弧线帽：“对接”，“圆形”或“正方形” Default: "butt"
填	目的	弧填充配置。 您可以指定下一个： - "#ff1e41" - { color: "#ff1e41" } - { color: 'rgba(255, 255, 255, .3)' } - { gradient: ["red", "green", "blue"] } - { gradient: [["red", .2], ["green", .3], ["blue", .8]] } - { gradient: [ ... ], gradientAngle: Math.PI / 4 } - { gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] } - { image: "http://i.imgur.com/pT0i89v.png" } - { image: imageInstance } - { color: "lime", image: "http://i.imgur.com/pT0i89v.png" } 默认值： { gradient: ["#3aeabb", "#fdd250"] }
空填充	串	“空”弧的颜色。 目前仅支持颜色填充 默认值： "rgba(0, 0, 0, .1)"
动画	混合的	动画配置。 请参阅jQuery动画 。 您也可以将其设置为false 默认值： { duration: 1200, easing: "circleProgressEasing" } "circleProgressEasing" 只是一种由内 "circleProgressEasing" 的轻松
动画起始值	数	默认动画从0.0开始，到指定value结束。 我们将此称为直接动画。 如果要制作反向动画，则应将animationStartValue设置为1.0 。 另外，您可以指定0.0到1.0任何其他值 默认值： 0.0
起始角度	数	初始角度(对于0值) 默认值： -Math.PI
插入模式	串	画布插入模式：将其追加或添加到父元素中 默认值： "prepend"
厚度	数	弧的宽度。 默认情况下，它会自动计算为size 1/14，但您可以设置自己的数字 默认值： "auto"
显示百分比	布尔型	显示圆内的加载百分比。 如果设置了inner-text属性，则不会显示百分比。 默认值： true

---

---

大事记 (Events)

Events emitted by the component to the parent.

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

Event Name	Description
vue-circle-init(event)	This event is emmited after the circle is initialized
vue-circle-progress(event,progress,stepValue)	This event is emitted on every progress step
vue-circle-end(event)	This event is emitted after completing progress

活动名称	描述
vue-circle-init(事件)	初始化圆之后，将引发此事件
vue-circle-progress(事件，进度，stepValue)	此事件在每个进度步骤上发出
圆环结束(事件)	完成进度后发出此事件

---

---

方法 (Methods)

Methods you can call on the component.

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

Method	Description
updateProgress(value)	It will update component progress value and animate the change. It doesn't redraw the widget.
updateFill(fill)	It will update component fill color.

方法	描述
updateProgress(值)	它将更新组件进度值并对更改进行动画处理。 它不会重绘窗口小部件。
updateFill(填充)	它将更新组件填充颜色。

使用方法 (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，如下所示

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圆形进度条组件