Vue3实战笔记（19）—封装菜单组件

文章目录

前言
一、封装左侧菜单导航组件
二、使用步骤
三、小彩蛋
总结

前言

在Vue 3中封装一个左侧导航菜单组件是一项提升项目结构清晰度和代码可复用性的关键任务。这个过程不仅涉及组件的设计与实现，还需考虑其灵活性、易用性以及与Vue 3新特性的紧密结合。以下是对这一过程的简介：

一、封装左侧菜单导航组件

继续开发，封装一个左侧菜单，在目录src\components\navigation下创建文件Navigation.vue：


<template><!-- <v-card> --><!-- <v-layout> --><v-navigation-drawerv-model="drawer":rail="rail"permanent@click="rail = false"><v-list-itemprepend-avatar="https://randomuser.me/api/portraits/men/88.jpg"title="John Leider"nav><template v-slot:append><v-btnvariant="text"icon="mdi:mdi-chevron-left"@click.stop="rail = !rail"></v-btn></template></v-list-item><v-divider></v-divider><v-list density="compact" nav><v-list-item v-for="nav in navigation" :key="nav.id" :prepend-icon="nav.icon" :title=nav.name value="home"></v-list-item></v-list></v-navigation-drawer><!-- </v-layout> --><!-- </v-card> --></template><script  lang='ts' setup name="Navigation">import { ref } from 'vue';let drawer=ref(true)let rail=ref(false)//false代表展开//菜单示例，后面会动态获取let navigation = ref([{"id":"1","name":"系统管理","path":"/system","hidden":false,"icon":"mdi:mdi-minus","component":"","redirect":"noDirect","children": [{        "id":"11","name":"用户管理","path":"/user","hidden":false,"icon":"mdi:mdi-account","component":"","redirect":"noDirect","children":[] }]},{"id":"2","name":"开发工具","path":"/system","hidden":false,"icon":"mdi:mdi-tools","component":"","redirect":"noDirect"},{"id":"3","name":"UI元素","path":"/contact","hidden":false,"icon":"mdi:mdi-ubisoft","component":"","redirect":"noDirect"},{"id":"4","name":"联系我们","path":"/contact","hidden":false,"icon":"mdi:mdi-contacts","component":"","redirect":"noDirect"},])
</script>

二、使用步骤

引入导航菜单组件并使用：


<template><v-app><Navigation app="false"></Navigation><v-main></v-main></v-app>
</template><script lang="ts">
import Navigation from "@/components/navigation/Navigation.vue"
</script>