必备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
评论: