【Vue3+Vite+TS】10.0 组件七：动态加载进度条

必备UI组件

将用到的组件：Progress 进度条

组件设计

新建src\components\baseline\progress\src\index.vue

<!--
 * @Author: bobokaka
 * @Date: 2021-12-23 00:07:25
 * @LastEditTime: 2021-12-31 18:48:46
 * @LastEditors: bobokaka
 * @Description: 动态加载进度条
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\trend\src\index.vue
-->
<template>
    <div><el-progress :percentage="percentage"></el-progress></div>
</template>
<script lang="ts" setup>
const props = defineProps({
    //说明：百分比，必填
    percentage: {
        required: true,
        type: Number,
        default: 0,
    },
    //说明：进度条是否有动态效果
    isAnimation: {
        type: Boolean,
        default: false,
    },
    // 动画时长(单位：毫秒)
    time: {
        type: Number,
        default: 3000,
    },
})
</script>
<style lang="scss" scoped></style>

新建src\components\baseline\progress\index.ts

import { App } from 'vue'
import Progress from './src/index.vue'

export { Progress }

//组件可通过use的形式使用
export default {
  Progress,
    install(app: App) {
        app.component('bs-progress', Progress)
    },
}

修改src\components\baseline\index.ts

import { App } from 'vue'
import ChooseArea from './chooseArea'
import ChooseIcon from './chooseIcon'
import Container from './container'
import Trend from './trend'
import Notification from './notification'
import List from './list'
import Menu from './menu'
import Progress from './progress'

const components = [
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
]
export {
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
}

//组件可通过use的形式使用
export default {
    install(app: App) {
        components.map(item => {
            app.use(item)
        })
    },
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
}

修改路由，新增路由：
src\router

{
                path: '/progress',
                component: () => import('../views/baseline/progress/index.vue'),
            },

新增src\views\baseline\progress\index.vue

<template>
    <div>
        <bs-progress :percentage="60"></bs-progress>
    </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.bs-wrapper {
}
</style>

运行如下：

image.png

动态加载实现

GIF.gif

优化兼容

修改src\views\baseline\progress\index.vue

<template>
    <div>
        <bs-progress :percentage="60" is-animation></bs-progress>
        <bs-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="70"
            is-animation
            status="success"
        />
    </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.bs-wrapper {
}
</style>

修改src\components\baseline\progress\src\index.vue

<template>
    <div>
        <el-progress v-bind="$attrs" :percentage="num"></el-progress>
  
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
const props = defineProps({
    //说明：百分比，必填
    percentage: {
        required: true,
        type: Number,
        default: 0,
    },
    //说明：进度条是否有动态效果
    isAnimation: {
        type: Boolean,
        default: false,
    },
    // 动画时长(单位：毫秒)
    time: {
        type: Number,
        default: 3000,
    },
})

//进度条计数
let num = ref(0)
//DOM加载完成后，执行
onMounted(() => {
    if (props.isAnimation) {
        //如果进度条有动态效果
        //规定时间内加载完成
        let timeSegment = Math.ceil(props.time / props.percentage)
        //进度条计数每次加1
        let timer = setInterval(() => {
            num.value++
            if (num.value >= props.percentage) {
                num.value = props.percentage
                //清空定时器
                clearInterval(timer)
            }
        }, timeSegment)
    } else {
        num.value = props.percentage
    }
})
</script>
<style lang="scss" scoped></style>

image.png

圆形进度条

圆形进度条本质是一个svg图片。
修改src\views\baseline\progress\index.vue

<template>
    <div>
        <bs-progress :percentage="60" is-animation></bs-progress>
        <bs-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="70"
            is-animation
            status="success"
        />
        <bs-progress type="circle" :percentage="50" is-animation/>
    </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.bs-wrapper {
}
::v-deep(svg) {
    width: 1.25rem;
    height: 1.25rem;
}
</style>

image.png