vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例
更新時(shí)間：2023年11月12日 11:44:34 作者：李淵橋
這篇文章主要為大家介紹了vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
借鑒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5中的SVG屬性實(shí)現(xiàn)圓形進(jìn)度條效果</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詳細(xì)內(nèi)容
<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},//進(jìn)度條進(jìn)度
width: {type: Number, default: 140},//整個(gè)寬度
strokeWidth: {type: Number, default: 10},//進(jìn)度條寬度
textClass: {type: String, default: "cycle-text"},//中間文字的類名
backgroundColor: {type: String, default: "#ebeef5"},//進(jìn)度條背景顏色
progressColor: {type: String, default: "#20a0ff"},//進(jìn)度條背景顏色
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>
注意圖片的引用方式 否則可能無(wú)法顯示
如果不傳imgUrl 就會(huì)顯示百分比數(shù)字
其他的根據(jù)自己需要修改吧
寫這部分主要是element不滿足內(nèi)部顯示圖片的需求
以上就是vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例的詳細(xì)內(nèi)容，更多關(guān)于vue進(jìn)度條內(nèi)部顯示圖片的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家整理了在Vue開(kāi)發(fā)中整合axios要用到的文件，在vue開(kāi)發(fā)中，不可避免要整合axios，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-04-04
`toRaw` 是 Vue3 提供的一個(gè) API,用于獲取響應(yīng)式對(duì)象的原始非響應(yīng)式對(duì)象,主要用于調(diào)試、與第三方庫(kù)兼容以及避免無(wú)限遞歸更新等場(chǎng)景,使用時(shí)需要注意不要濫用,以免破壞響應(yīng)式系統(tǒng),感興趣的朋友跟隨小編一起看看吧2024-11-11
vue設(shè)置頁(yè)面超時(shí)15分鐘自動(dòng)退出登錄的方法詳解
當(dāng)用戶登錄后,如果長(zhǎng)時(shí)間未操作頁(yè)面這個(gè)時(shí)候需要自動(dòng)退出登錄回到登錄頁(yè)面,本文將給大家介紹一下vue設(shè)置頁(yè)面超時(shí)15分鐘自動(dòng)退出登錄的方法,感興趣的同學(xué)可以自己動(dòng)手試一下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue瀑布流組件實(shí)現(xiàn)上拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了vue下拉列表功能實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
解決Element ui導(dǎo)航欄選中背景色刷新消失的問(wèn)題
這篇文章主要介紹了解決Element ui導(dǎo)航欄選中背景色刷新消失的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實(shí)現(xiàn)菜單權(quán)限控制的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)菜單權(quán)限控制的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue3中的ref為何要用.value進(jìn)行值的調(diào)用呢
這篇文章主要介紹了Vue3中的ref為何要用.value進(jìn)行值的調(diào)用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
mpvue 是美團(tuán)開(kāi)源的一套語(yǔ)法與vue.js一致的、快速開(kāi)發(fā)小程序的前端框架，這篇文章主要介紹了基于mpvue的小程序項(xiàng)目搭建的步驟，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05