vue圆形进度条环形进度条组件内部显示图片示例
更新时间：2023年11月12日 11:44:34 作者：李渊桥
这篇文章主要为大家介绍了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进度条内部显示图片的资料请关注脚本之家其它相关文章！
相关文章
如何用vue3+Element plus实现一个完整登录功能
要实现用户的登录功能,可以使用Vue3和Element Plus,下面这篇文章主要给大家介绍了关于如何基于Vue3和Element Plus组件库实现一个完整的登录功能,文中提供了详细的代码示例,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue之绑定class样式与style样式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
如果你在社交媒体上停留的时间过长，那么，你所在的网站很可能正在使用无限滚动组件。这篇文章教你利用Vue3实现无限滚动组件，感兴趣的可以参考一下2022-09-09
这篇文章主要为大家详细介绍了vue实现宫格轮转抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了解决vue-cli中stylus无法使用的问题方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了在nuxt使用vueX代替storage的实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue父组件给子组件的组件传值provide inject的方法
在本篇文章里小编给大家整理的是一篇关于vue父组件给子组件的组件传值provide inject的方法，需要的朋友们学习下。2019-10-10
这篇文章主要为大家介绍了Vue中$refs和$nextTick的使用方法，文中的示例代码讲解详细，对我们学习Vue有一定帮助，需要的可以参考一下2022-03-03
Vue3导入Elementplus时组件无法加载的情况及解决
这篇文章主要介绍了Vue3导入Elementplus时组件无法加载的情况及解决方案,具有很好的参考价值,希望对大家有所帮助2024-03-03
vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天)
这篇文章主要介绍了vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
最新评论