【Vue3+Vite+TS】8.0 组件六:导航菜单

必备UI组件

将用到的组件:
Menu 菜单

组件设计

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

<template>
    <div>Menu</div>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { MenuItem } from './types'

const props = defineProps({
    //说明:
    data: {
        required: true,
        type: Array as PropType<MenuItem[]>,
    },
})
console.log('data:', props.data)
</script>
<style lang="scss" scoped></style>

新建src\components\baseline\menu\src\types.ts

export interface MenuItem {
    //导航菜单的图标
    icon?: string
    //导航菜单的名字
    name: string
    //导航菜单的标识
    code: string
    //子菜单
    children?: MenuItem[]
}

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

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

export { Menu }

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

修改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'
const components = [
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
]
export { ChooseArea, ChooseIcon, Container, Trend, Notification, List, Menu }

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

修改src\router\index.ts,新增路由参数

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

新建src\views\baseline\menu\index.vue

<template>
    <div><bs-menu :data="data"></bs-menu></div>
</template>
<script lang="ts" setup>
let data = [
    { name: '首页', code: '1', icon: 'el-icon-document' },
    { nam
如若转载请注明原文及出处:https://www.dsiab.com/post/77a8532d-b8ac-4f23-b1a9-c678f8c11b3d
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: