vue圆形进度条组件_一个Vue.js组件，用于创建精美的动画圆形进度条

vue圆形进度条组件

Vue-椭圆进展 (vue-ellipse-progress)

A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose of this plugin is to combine the best properties of other available libraries and to add unique features, delivered in a simple to use component with friendly interface.

无依赖项的Vue.js插件可创建精美的动画圆形进度条，并通过SVG实现。 该插件的目的是结合其他可用库的最佳属性，并添加独特的功能，这些功能通过具有友好界面的易于使用的组件提供。

With the available options you can create simple circles very quickly. But playing with the combinations of props and with a bit of imagination you can create really exciting things.

使用可用的选项，您可以非常快速地创建简单的圆圈。 但是，结合各种道具和一些想象力，您可以创造出真正令人兴奋的东西。

View Demo 查看演示 View Github 查看Github

用法 (Usage)

Install the library via npm:

通过npm安装库：

npm i vue-ellipse-progress

The component is provided as a Vue.js plugin. So just initialize it in your main.js:

该组件作为Vue.js插件提供。 因此，只需在main.js对其进行初始化：

import VueEllipseProgress from 'vue-ellipse-progress';

Vue.use(VueEllipseProgress);

// Vue.use(VueEllipseProgress, "vep"); you can define a name and use the plugin like <vep/>

Now use the component:

现在使用组件：

<vue-ellipse-progress 
  :data="circles"                    
  :progress="progress"
  :angle="-90"
  color="blue"
  :colorFill="colorFillGradient"
  emptyColor="#8ec5fc"
  :emptyColorFill="emptyColorFillGradient"                      
  :size="300"
  :thickness="10"
  emptyThickness="10%"
  lineMode="in 10"
  :legend="true"
  :legendValue="180"
  legendClass="legend-custom-style"
  dash="60 0.9"
  animation="reverse 700 400"
  :noData="false"
  :loading="false"                      
  fontColor="white"
  :half="false"
  :gap="10"
  dot="10 blue"
  fontSize="5rem">
  
  <span slot="legend-value">/200</span>
  <p slot="legend-caption">GOOD JOB</p>
  
</vue-ellipse-progress>

选件 (Options)

You are ready to go with just following line:

您可以按照以下步骤进行操作：

<vue-ellipse-progress :progress="progress"/>

The progress is the only required property. However, in order to create unique circles that match your design needs, you can use all the properties explained below.

progress是唯一必需的属性。 但是，为了创建符合您的设计需求的独特圆，可以使用下面说明的所有属性。

This table below provides a quick overview over all available options. To gain more information in general and concerning the creation of exclusive circles please read below the table.

下表提供了所有可用选项的快速概述。 要获得一般性信息以及有关创建专属圈子的更多信息，请阅读下表。

:grey_exclamation: Also make sure to check slot options

：grey_exclamation：还要确保检查插槽选项

Prop	Type	Values	Default
progress	Number	0 - 100
size	Number	>=0	200
line	String	"round | square | butt"	"round"
thickness	Number | String	>=0 as Number or percent value as String	"5%"
lineMode	String	"normal | out | out-over | in | in-over | top | bottom [offset]"	"normal 0"
emptyThickness	Number | String	>=0 as Number or percent value as String	"5%"
color	String | Object	any color as String or Object to specify gradient (see details)	"#3f79ff"
colorFill	String | Object	same as color	"transparent"
emptyColor	String | Object	same as color	"#e6e9f0"
emptyColorFill	String | Object	same as color	"transparent"
legend	Boolean		true
legendValue	Number | String	any number, accepts a . or "," as decimals delimiter
animation	String	"default | rs | loop | reverse | bounce [duration delay]"	"default 1000 400"
loading	Boolean		false
determinate	Boolean		false
noData	Boolean		false
angle	Number	any Number	-90
fontSize	String	any valid CSS value	"1rem"
fontColor	String	any valid CSS value	"gray"
legendClass	String	any
dash	String	"[strict] count spacing"
half	Boolean		false
dot	String | Number | Object	Accepts size, color and other styles as Number, descriptive string "10% red" or object {size : 10, backgroundColor: "red", widht: "2px", borderRadius: "5px" ...}	0
gap	Number	defines the gap between multiple circles	0
data	Array	defines multiple circles, takes as values Objects with all props defined above

Struts	类型	价值观	默认
progress	数	0-100
size	数	> = 0	200
line	串	“圆形|方形|对接”	“回合”
thickness	编号 串	> = 0作为数字或百分比值作为字符串	“ 5％”
lineMode	串	“正常|超出|超出|超出|超过|顶部|底部[偏移]”	“正常0”
emptyThickness