0.0.5 • Published 5 years ago
vue-simple-circle-svg v0.0.5
Description
I follow some online tutorials to create a component to meet my project requirement
The result:
Attribute
| Attribute | Description | Required? |
|---|---|---|
| id | String, the identity should be unique in the page | Yes |
| percentage | Number, the circle filled with the percentage, should be in the mathematical range 0,1 | No, default:0 |
| color | Color code, for example, "#ff0", it is the circle filled color | No, default: "#f0f" |
| r | Number, the circle radius, should be >= 10 | No, default: 20 |
| h | Number, the height of the svg | No, default: r*2 |
| w | Number, the width of the svg | No, default: r*2 |
| text | String, the text to display in the center of the circle | No, default:"" |
| font-color | Color code, for example, "#ff0", it is the central text | No, default: black |
| font-family | String for the font family, for example, "Impact", it is for the central text | No, default:"Arial" |
How to use it
npm install vue-simple-icon-svgInside your js file which uses vue lib,
import VueSimpleCircleSvg from 'vue-simple-circle-svg'
Vue.use(VueSimpleCircleSvg);Then you can put the below code in your page
<vue-simple-circle-svg :percentage="0.2" :r="50" id="1"></vue-simple-circle-svg>
<vue-simple-circle-svg color="#CFCFCF" :percentage="1" text="1" id="2"></vue-simple-circle-svg>
<vue-simple-circle-svg color="#668cff" :percentage="0.5" text="2" id="3"></vue-simple-circle-svg>
<vue-simple-circle-svg color="#33ff33" :percentage="0.75" text="test" id="4" :r="30" font-color="red" font-size="14px" font-family="Impact"></vue-simple-circle-svg>
<vue-simple-circle-svg color="#33ff33" :percentage="0.75" text="test" id="4" :r="30" :h="60" :w="80" font-color="red" font-size="14px" font-family="Impact"></vue-simple-circle-svg>Modification and package
npx bili --bundle-node-modulesPublish the package
npm publish