v3_yyz/src/components/CircleProgress.vue

<template>
    <div>
        <div class="number" v-if="textPosition == 'top'">
            <ul class="flex">
                <!-- <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" /> -->
                <vue-number-roll-plus
                    :number="targetValue"
                    background="transparent"
                    speed="1.4"
                    >
                </vue-number-roll-plus>
                <!-- <count-to :useEasing="true" style="font-size: 0.08rem;"  :startVal='1' :endVal='targetValue' :duration='2000'></count-to> -->
                <span>个</span>
            </ul>
        </div>
    </div>
    <div class="progress" :style="{ width, height }">
        <svg viewBox="0 0 96 96" class="svg-circle-progress">
            <circle r="38" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="4" class="svg-progress"
                style="stroke-dasharray: 275, 279.602; stroke: rgba(255, 255, 255, 0.19)"></circle>
            <circle r="38" transform="rotate(180 48 48)" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="4"
                class="svg-progress" :style="`stroke-dasharray: 240, 279.602;stroke:${color};`"></circle>
        </svg>
        <div class="mask">
            <slot></slot>
        </div>
    </div>

    <div class="bottomNumber" v-if="textPosition == 'bottom'">
        <ul class="flex" style="width: 70px;display: flex;align-items: center;justify-content: center;">
            <!-- <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" /> -->
            <div style="color: #fff;font-weight: 600;  ">
                <vue-number-roll-plus
                    :number="targetValue"
                    background="transparent"
                    speed="1.4"
                    >
                </vue-number-roll-plus>

                <!-- <count-to :useEasing="true" style="font-size: 0.08rem;"  :startVal='1' :endVal='targetValue' :duration='2000'></count-to> -->
            </div>
            <span style="color: antiquewhite;"   v-if="text.includes('课程')">(节)</span>
            <span style="color: antiquewhite;" v-else>(人)</span>
        </ul>

    </div>
</template>
<script setup lang="ts">

import VueNumberRollPlus from "vue3-number-roll-plus"
import "vue3-number-roll-plus/main.css"

import { ref, computed, toRefs, watch, onMounted,reactive,  } from 'vue';
// import ScrollNum from './roll.vue';
import { CountTo } from 'vue3-count-to';



const props = defineProps({
    targetValue: {
        type: Number,
        require: false,
        default: -1,
    },
    color: {
        type: String,
        default: '#4c7cee',
    },
    text: {
        type: String,
        default: -1,
    },
    width: {
        type: String,
        default: '54.6px',
    },
    height: {
        type: String,
        default: '54.6px',
    },
    textPosition: {
        type: String,
        require: false,
        default: 'top',
    }
});
const { height, width, color, targetValue, textPosition,text } = toRefs(props);

// let showProgress = ref<number>(0);
const numArr = computed(() => {
    const str = String(targetValue.value)
    let arr = <any>[]
    for (let i = 0; i < str.length; i++) {
        arr.push(parseInt(str[i]))
    }
    return arr
})

const progressValue = ref<number>(0);
let timer = ref<any>(null)
const circleValue = () => {


    if (textPosition.value == "top") {
        if (progressValue.value = 360) {
            timer.value = null
            return
        }
        (timer as any) = setInterval(() => {
            progressValue.value += 5
        }, 3000)
    } else {
        if (progressValue.value = 120) {
            timer.value = null
            return
        }
        (timer as any) = setInterval(() => {
            progressValue.value += 5
        }, 3000)
    }
}



onMounted(() => {
    circleValue()

 
})

// const progressValue = ref(0)
watch(textPosition, (newValue) => {
    console.log("监听一下现在的位置", newValue)
    // progressValue.value = 360;
});


</script>
<style lang="scss" scoped>
.progress {

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    text-align: center;
}

.svg-circle-progress {
    position: relative;
    transform: rotate(-90deg);

}

.svg-progress {
    stroke: #2196f3;
    stroke-linecap: round;
    transition: all 0.3s linear;
}

.mask {
    position: absolute;
    margin-top: 5px;
}

.number {
    font-size: 14px;
    font-weight: bold;
    height: 28px;
    // background-color: #2196f3;
    margin-top: -8px;

    span {
        font-size: 12px;
    }
}



ul {
    padding: 0;
    margin: 0
}

.flex {
    display: flex;
    // border: 1px solid darkblue;
    box-sizing: border-box;
    // width: 100px;
    align-items: center;
    text-align: center;

    span {
        font-size: 12px;
        margin-left: 4px;
    }
}

</style>
<style lang="scss">
.real-time-num{
    display: flex;
    align-items: center;
    // background-color: rgb(137, 80, 5) !important;
    width: 11px!important;

    margin-left: 0px !important;

}
</style>