vue组件嵌套组件不显示_Vue组件，将计数器显示为圆弧

vue组件嵌套组件不显示

VUE ARC柜台 (VUE ARC COUNTER)

This Vue component generates counter in a circular arc. The angles, colors, strokewidth, spacing between dashes and direction can all be controlled through properties.

该Vue组件在圆弧中生成计数器。 角度，颜色，笔划宽度，虚线之间的间距以及方向都可以通过属性进行控制。

项目设置 (Project setup)

With a package manager

与包裹经理

# npm
$ npm install vue-arc-counter

#yarn
$ yarn add vue-arc-counter

For the browser

对于浏览器

<script src="unpkg.com/[email protected]/dist/arcCounter.umd.min.js"></script>

这个怎么运作 (How it works)

The component generates an SVG element with default width and height of 100% (outer diameter of the counter). Two dashed strokes are overlayed: the bottom one controlled by stroke and dashCount and the top one by activeStroke and activeCount. A start angle smaller than the end angle will make for clockwise counting, vice versa.

该组件将生成一个SVG元素，其默认宽度和高度为100％(计数器的外径)。 两个虚线笔划被覆盖：最下面的一个由stroke和dashCount控制，最上面的一个由activeStroke和activeCount 。 start角度小于end角度将用于顺时针计数，反之亦然。

The absolute difference between end and start angles should always be less than 360 degrees.

end角度和start角度之间的绝对差应始终小于360度。

物产 (Properties)

prop	description	default	options
dashCount	Total number of dashes	21	Natural number
activeCount	Number of dashes on top	5	Natural number
strokeWidth	Stroke as a percentage of the radius	20	0 to 100
stroke	Stroke color of the bottom dashes	lightgrey	color
activeStroke	Stroke color of the top dashes	dodgerblue	color
dashSpacing	Fraction of width taken up by space between dashes	1/4	0 to 1
start	Start angle from top	-120	-360 to 360
end	End angle from top	120	-360 to 360

Struts	描述	默认	选项
dashCount	破折号总数	21	自然数
activeCount	顶部破折号	5	自然数
strokeWidth	行程占半径的百分比	20	0至100
stroke	底部虚线的笔触颜色	lightgrey	color
activeStroke	顶部虚线的笔触颜色	dodgerblue	color
dashSpacing	破折号之间的空格所占的宽度分数	1/4	0比1
start	从顶部开始的角度	-120	-360至360
end	顶角	120	-360至360

翻译自: https://vuejsexamples.com/functional-vue-component-that-displays-a-counter-as-a-circular-arc/

vue组件嵌套组件不显示