55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<view :style="{
|
||
|
|
width: size + 'rpx',
|
||
|
|
height: size + 'rpx',
|
||
|
|
'--offset': offset
|
||
|
|
}"
|
||
|
|
v-html="svgHtml"
|
||
|
|
ref="svgRef"
|
||
|
|
>
|
||
|
|
</view>
|
||
|
|
<!-- <svg viewBox="0 0 100 100">
|
||
|
|
<circle cx="50" cy="50" r="40" stroke="#7C7C7C" stroke-width="7" fill="none" />
|
||
|
|
<circle cx="50" cy="50" r="40" stroke="#10F6FC" stroke-width="7" fill="none" stroke-dasharray="251.2" stroke-dashoffset="251.2" class="progress-bar"/>
|
||
|
|
</svg> -->
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, computed, watch } from "vue";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
size: {
|
||
|
|
type: Number,
|
||
|
|
default: 280,
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: "#333333",
|
||
|
|
},
|
||
|
|
progress:{}
|
||
|
|
});
|
||
|
|
|
||
|
|
const svgRef = ref(null)
|
||
|
|
const offset = ref(251.2);
|
||
|
|
const svgHtml = ref(`<svg viewBox="0 0 100 100">
|
||
|
|
<circle cx="50" cy="50" r="40" stroke="#7C7C7C" stroke-width="7" fill="none" />
|
||
|
|
<circle cx="50" cy="50" r="40" stroke="#10F6FC" stroke-width="7" fill="none" stroke-dasharray="251.2" stroke-dashoffset="${offset.value}"/>
|
||
|
|
</svg>`);
|
||
|
|
|
||
|
|
watch(() => props.progress, (newVal, oldVal) => {
|
||
|
|
updateProgress(newVal)
|
||
|
|
},{deep:true});
|
||
|
|
|
||
|
|
// 更新进度函数
|
||
|
|
const updateProgress=(newProgress)=>{
|
||
|
|
offset.value = 251.2 - (251.2 * newProgress) / 100;
|
||
|
|
svgHtml.value = `<svg viewBox="0 0 100 100">
|
||
|
|
<circle cx="50" cy="50" r="40" stroke="#7C7C7C" stroke-width="7" fill="none" />
|
||
|
|
<circle cx="50" cy="50" r="40" stroke="#10F6FC" stroke-width="7" fill="none" stroke-dasharray="251.2" stroke-dashoffset="${offset.value}"/>
|
||
|
|
</svg>`
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|