vue圆形进度条环形进度条组件内部显示图片示例
作者：李渊桥
这篇文章主要为大家介绍了vue圆形进度条环形进度条组件内部显示图片示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
借鉴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5中的SVG属性实现圆形进度条效果</title>
<style>
#a{color:red;}
</style>
</head>
<body>
<svg width="440" height="440">
<text style="fill:black;" font-size="80" x="160" y="240" width="440" height="440" id="a">30%</text>
<circle cx="220" cy="220" r="170" stroke-width="40" stroke="#C9CACA" fill="none"></circle>
<circle id="c1" cx="220" cy="220" r="170" stroke-width="40" stroke="#E73468" fill="none"
transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=""></circle>
</svg>
<script>
var circle = document.getElementById("c1");
var a = document.getElementById("a").innerHTML;
var b=parseInt(a)/100;
var percent = 0, perimeter = Math.PI * 2 * 170;
setInterval(function () {
if(percent<b){
circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
percent+=1/100;
}
},100);
</script>
</body>
</html>cycle.vue详细内容
<template>
<div class="cycle_box" style="position: relative;" :style="{width:width+'px',height:width+'px'}">
<svg :width="width" :height="width" >
<circle :cx="cyclePosition" :cy="cyclePosition" :r="radius" :stroke-width="strokeWidth" :stroke="backgroundColor" fill="none" ></circle>
<circle :cx="cyclePosition" :cy="cyclePosition" :r="radius" :stroke-width="strokeWidth" :stroke="progressColor" fill="none"
:stroke-dasharray="dasharray" :transform="transform" class="cycle_out"></circle>
</svg>
<img :src="imgUrl" alt="" v-if="imgUrl!=''" class="cycle_img" />
<div class="cycle_text" v-if="imgUrl==''" style="font-size: 13.1111px; color: rgb(96, 98, 102);">{{progress}}%</div>
</div>
</template>
<script>
export default {
name:"cycle",
props: {
progress: {type: Number, default: 0},//进度条进度
width: {type: Number, default: 140},//整个宽度
strokeWidth: {type: Number, default: 10},//进度条宽度
textClass: {type: String, default: "cycle-text"},//中间文字的类名
backgroundColor: {type: String, default: "#ebeef5"},//进度条背景颜色
progressColor: {type: String, default: "#20a0ff"},//进度条背景颜色
imgUrl: {type: String, default: ""},//显示的图片
},
data (){
return {
perimeter :Math.PI * 2 * 40,
radius:0,//半径
dasharray:0,
cyclePosition:0,
transform:"rotate(270,60,60)"
}
},
mounted(){
let percent=(this.progress/100)
this.radius=Math.floor((this.width-this.strokeWidth)/2)
this.cyclePosition=this.width/2
this.perimeter=Math.PI * 2 * this.radius
this.dasharray=this.perimeter * percent + " " + this.perimeter * (1- percent)
this.transform=`rotate(270,${this.cyclePosition},${this.cyclePosition})`
console.log(this.dasharray, this.transform,this.cyclePosition,this.perimeter,this.radius)
},
methods:{
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cycle_out{
stroke-linecap:round;
}
.cycle_img{
position: absolute;
top: 50%;
left: 40%;
width: 20%;
text-align: center;
margin: 0;
transform: translate(0,-50%);
}
.cycle_text{
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
margin: 0;
transform: translate(0,-50%);
}
</style>引用方式
js
import cycle from "../../components/Cycle.vue"
components: {
cycle,
},
data (){
return {
imageUrl: require('../../assets/woman.svg'),
}
},模版部分
<cycle :progress="80" :width="100" :stroke-width="12" :imgUrl="imageUrl"></cycle>
注意图片的引用方式 否则可能无法显示
如果不传imgUrl 就会显示百分比数字
其他的根据自己需要修改吧
写这部分主要是element不满足内部显示图片的需求
以上就是vue圆形进度条环形进度条组件内部显示图片示例的详细内容，更多关于vue进度条内部显示图片的资料请关注脚本之家其它相关文章！