封装组件库-侧边导航栏

实现导航栏的二次封装

基于Header-Aside-Main布局，实现侧边导航栏的伸缩。

初始配置

配置vite2+vue-ts开发环境，createWebHistory路由配置
将Container导航组件配置为根路由组件，children项配置Home组件
定义两个子组件：navHeader、navSide

navHeader

利用Menu菜单属性collapse实现伸缩，默认值false

<el-header>
  <!-- v-model传props -->
  <nav-header v-model:collapse="isCollapse"></nav-header>
</el-header>

defineProps API为函数，返回值为父组件传来的属性

// 声明泛型
let props = defineProps<{
  collapse: boolean
}>()
// 定义发送给父组件的方法
let emits = defineEmits(['update:collapse'])
//toggle为改变Header组件中伸缩图标的方法
let toggle = ()=>{
    emits('update:collapse', !props.collapse)
}

navSide

接收collapse值

let props = defineProps<{
    collapse: boolean
}>()

基于官方文档，设置伸展的width，父组件的el-aside设置width为auto

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}