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>
注意圖片的引用方式 否則可能無法顯示
如果不傳imgUrl 就會顯示百分比數(shù)字
其他的根據(jù)自己需要修改吧
寫這部分主要是element不滿足內(nèi)部顯示圖片的需求
以上就是vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例的詳細(xì)內(nèi)容，更多關(guān)于vue進(jìn)度條內(nèi)部顯示圖片的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
緩存清除成為克服瀏覽器緩存中過時(shí)內(nèi)容挑戰(zhàn)的關(guān)鍵技術(shù),術(shù)語“緩存清除”是指故意使靜態(tài)資源失效或進(jìn)行版本控制,迫使瀏覽器在發(fā)生更改時(shí)獲取新資源,本文給大家介紹了Vue如何清除緩存,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了解決vue-cli3 使用子目錄部署問題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
Vue ElementUI this.$confirm async await封
這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了聊聊Vue.js的template編譯的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue線上部署請求接口報(bào)錯(cuò)net::ERR_CONNECTION_REFUSED
vue線上部署請求接口報(bào)錯(cuò)net::ERR_CONNECTION_REFUSED問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue動態(tài)控制input的disabled屬性的方法
這篇文章主要介紹了Vue動態(tài)控制input的disabled屬性的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
詳解vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue中的自定義渲染器和異步渲染的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue內(nèi)置動態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03
vue?elementUi中的tabs標(biāo)簽頁使用教程
Tabs 組件提供了選項(xiàng)卡功能,默認(rèn)選中第一個(gè)標(biāo)簽頁,下面這篇文章主要給大家介紹了關(guān)于vue?elementUi中的tabs標(biāo)簽頁使用的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03