【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'),
            },

如若转载请注明原文及出处:https://www.dsiab.com/post/77fe1cb6-36e0-43bf-bf71-3ba632a40270
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: