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: r2 | | w | Number, the width of the svg | No, default: r2 | | 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-svg

Inside 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-modules

Publish the package

npm publish