js+css+vue_Vue +纯CSS百分比圈

js+css+vue

vue-css-百分比圆 (vue-css-percentage-circle)

Vue CSS Percentage Circle.

Vue CSS百分比圈子。

入门 (Getting Started)

npm install --save vue-css-percentage-circle

用法 (Usage)

<PercentageCircle :percent="50" />

主题化 (Theming)

<PercentageCircle :percent="50" active-color="blue" complete-color="green"/>
<PercentageCircle :percent="50" active-color="green" complete-color="orange"/>
<PercentageCircle :percent="50" active-color="orange" complete-color="blue"/>

动画的 (Animated)

<PercentageCircle :percent="50" :animate="true"/>

暗模式 (Dark Mode)

<PercentageCircle :percent="50" :dark-mode="true" />

API (API)

百分比圆 (percentage-circle)

道具 (props)

• percent Number (optional)

  percent 数字 ( 可选 )

  Percentage of progress (0-100)

  进度百分比(0-100)

• size String (optional) default: 'small'

  size 字符串 ( 可选 )， default: 'small'

  Size of percentage circle [micro, small, big]

  百分比圆的大小[微，小，大]

• active-color String (optional) default: 'blue'

  active-color 字符串 ( 可选 )， default: 'blue'

  Color when active. [blue, green, orange]

  活动时的颜色。 [蓝色，绿色，橙色]

• complete-color String (optional) default: ''

  complete-color 字符串 ( 可选 ) default: ''

  Color when complete. [blue, green, orange]

  完成后颜色。 [蓝色，绿色，橙色]

• animate Boolean (optional) default: false

  animate 布尔 ( 可选 ) default: false

  Animate percentage changes.

  动画百分比变化。

• refresh-rate Number (optional) default: 5

  refresh-rate 数字 ( 可选 )， default: 5

  Only applicable when animated is set to true. Speed in which animation changes happen

  仅在将animated设置为true时适用。 动画更改发生的速度

• dark-mode Boolean (optional) default: false

  dark-mode 布尔值 ( 可选 ) default: false

  Toggle between normal and dark themes

  在正常和黑暗主题之间切换

大事记 (events)

• click

  click

  Click event.

  点击事件。

测试中 (Testing)

Storybook used for testing. To run storybook, run:

用于测试的故事书。 要运行故事书，请运行：

npm run dev

or

要么

npm run storybook

翻译自: https://vuejsexamples.com/vue-pure-css-percentage-circle/

js+css+vue