qddegtya / v-circle

:doughnut: A collection of circle progress with Vue.js

v-circle

A collection of circle progress with Vue.js.

• Vue 1.0+ use v-circle 0.1+
• Vue 2.0+ use v-circle 0.2+

Demos & Examples

Live Demo: xiaoa.name/v-circle

To build the examples locally, run:

npm install
npm run dev

Then open http://localhost:8080/examples/home.html in a browser.

Installation

The easiest way to use v-circle is to install it from NPM and include it in your own Vue build process (using Webpack, etc)

$ npm install v-circle

Build

build to dist

$ npm run build

You can also use the standalone build by including dist/v-circle.js in your page. If you use this, make sure you have already included Vue, and it is available as a global variable.

Usage

.vue file usage

<template>
<circle-css color="#3498db" width=120 font-size=48 pv=12 bold=8 text-bg-color='#f0f0f0'></circle-css>
</template>

<script>
import CssCircle from 'v-circle/components/css-circle.vue'

export default {
  components: {
    circleCss: CssCircle
  }
}
</script>

Circles

• CssCircles
• SvgCircles
• CanvasCircles

API

CssCircles

prop	type	description	example	default value
color	String	circle progress fill color	#000000	#2ecc71
width	Number	circle size	180	150
fontSize	Number	circle progress value size	64	64
pv	Number	circle progress value	75	0
textColor	String	circle progress value color	#bdc3c7	#bdc3c7
bold	String	circle progress outline width	10	5
textBgColor	String	circle progress value background-color	#000000	#f9f9f9
borderColor	String	circle progress outline color	#000000	#bdc3c7
during	Number	circle progress animation dur-time	2	0.8
bgColor	String	circle progress background-color	#000000	#f0f0f0

Contributors

Thanks goes to these wonderful people (emoji key):

Archer (炽宇) 💻 🚇 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

v-circle's Issues

what's wrong

is there v0.2+ for vue2?

i saw the lastest version is 0.1.3?

请问现在使用的时候报错,怎么解决

ERROR in .//_css-loader@0.26.4@css-loader!.//_vue-loader@10.3.0@vue-loader/lib/style
-rewriter.js?id=data-v-382ba514&scoped=true!.//_sass-loader@4.1.1@sass-loader?indentedSyntax!.//_vue-loader@10.3.0@vue-loader/lib/selector.js?type=styles&index=0!./~/_v-circle@0.1.3@v-circle/components/css-circle.vue
Module build failed:
.v-circle {
^
Invalid CSS after ".v-circle {": expected "}", was "{"
in /zxy/zxy9/student-app/node_modules/_v-circle@0.1.3@v-circle/components/css-circle.vue (line 19, column 12)

Safari 11.0 issue

It doesn't work well in Safari 11.0, see the middle circle animation.

no clipping if no width value = set default value

change :

clip: this.setClip(0, this.width / 2, this.width, 0)

=>

clip: this.setClip(0, (this.width || DEFAULT_WIDTH) / 2, (this.width || DEFAULT_WIDTH), 0)

请问现在有Vue2.0+的版本吗

interactive mode on/off

Hello, nice project, thanks. It would be possible to add a prop to switch off the interactive functionality :

props: [
..
'interactive',
..

methods: {
setPv() {
if (!this.interactive) return
...

请问在vue里面如何调用

目前我的做法是：

<circle-css color="#3498db" width=120 font-size=48 pv=12 bold=8 text-bg-color='#f0f0f0'></circle-css>

然后在script里面引入:

import CircleCss from 'v-circle'

components: {
   CircleCss
  }

脚本直接报错：

index.js:3Uncaught SyntaxError: Unexpected token import