When working on a project, it is best to only use one set of component libraries, but many times our component library does not have the components we need. At this time, we still need to write the components ourselves. There is no ring progress bar component in vux, so we need to write one by ourselves.
After searching for information, I found a good implementation method, which is implemented through svg. I learned a little svg in the past but didn't have much in-depth understanding. . . Now it seems to be a sin, give the reference link
/a/1190000008149403
It can be seen that the original author used two methods, and we chose the second one, which is simple and easy to expand. You can see svg and you want to draw like canvas. The original text has been explained in detail, so here is the component you wrote. The players can also be more happy.
<template>
<svg :height="" :width="" x-mlns="http:///200/svg">
<circle
:r=""
:cx=""
:cy=""
:stroke=""
:stroke-width=""
fill="none"
stroke-linecap="round"/>
<circle
:stroke-dasharray="completenessHandle"
:r=""
:cx=""
:cy=""
:stroke-width=""
:stroke=""
fill="none"
class="progressRound"
/>
</svg>
</template>
<script>
export default {
name: 'CommonLoopProgress',
props: {
completeness: {
type: Number,
required: true,
},
progressOption: {
type: Object,
default: () => {},
},
},
data () {
return {
}
},
computed: {
completenessHandle () {
let circleLength = (2 * * )
let completenessLength = * circleLength
return `${completenessLength},100000000`
},
option () {
// Configurable items for all progress bars let baseOption = {
radius: 20,
strokeWidth: 5,
outerColor: '#E6E6E6',
innerColor: '#FFDE00',
}
(baseOption, )
// Automatically generate the center position = = +
= ( + ) * 2
return baseOption
},
},
}
</script>
<style scoped lang='stylus'>
@import '~stylus/_variables.styl';
@import '~stylus/_mixins.styl';
.progressRound {
transform-origin: center;
transform: rotate(-90deg);
transition: stroke-dasharray 0.3s ease-in;
}
</style>
Some bad naming methods in the original text have been modified, and our components are easy to configure and can be more free.
The above is all the content of this knowledge point. Thank you for your support.