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

必备UI组件

将用到的组件：
Progress 进度条

组件设计

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

新建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

运行如下：

image.png

动态加载实现

GIF.gif

优化兼容

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

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

image.png

圆形进度条

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

image.png