vue3中的伸縮菜單組件

更新時(shí)間：2023年01月14日 14:16:22 作者：阿wei程序媛

這篇文章主要介紹了vue3中的伸縮菜單組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3伸縮菜單組件

最近一直在學(xué)習(xí)分裝組件，學(xué)到了一個(gè)伸縮菜單欄組件，淺淺的記錄一下，想要封裝菜單的，代碼可以直接拿去用，稍作修改即可！

效果圖

1.在components下面創(chuàng)建一個(gè)container的文件，在container文件下面創(chuàng)建一個(gè)src文件，然后在src文件下創(chuàng)建index.vue文件

這個(gè)文件里寫入

<template>
    <div class="common-layout">
      <el-container>
        <el-aside width="auto">
<!--        側(cè)邊菜單欄組件-->
        <nav-side v-model:collapse="isCollapse"></nav-side>
        </el-aside>
        <el-container>
          <el-header>
<!--          頭部組件-->
            <nav-header v-model:collapse="isCollapse"></nav-header>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import navHeader from './navHeader/index.vue'
import navSide from './navSide/index.vue'
const isCollapse=ref<boolean>(false)
 
</script>
 
<style lang="scss" scoped>
 
.el-header {
 padding: 0;
  border-bottom: 1px solid #eeeeee;
}
</style>

2.在router文件下的index.ts寫入

// @ts-ignore
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=>import('../components/container/src/index.vue'),
        children:[
            {
                path: '/',
                name: 'home',
                component:()=>import('../view/home.vue'),
            }
        ]
    },
 
]
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
export default router

3.在components下面創(chuàng)建一個(gè)container的文件，在container文件下面創(chuàng)建一個(gè)src文件，然后在src文件下創(chuàng)建navHeader文件，在navHeader文件下創(chuàng)建index.vue文件

在文件里寫入

<template>
  <div class="header">
    <div @click="shrink">
<!--        伸縮圖標(biāo)-->
      <Expand v-if="collapse==true"></Expand>
      <Fold v-else></Fold>
    </div>
  </div>
</template>
 
<script lang="ts" setup>
import {ref} from 'vue'
let props=defineProps<{
  collapse:Boolean
}>()
let emits=defineEmits(['update:collapse'])
const shrink=()=>{
  emits('update:collapse',!props.collapse)
}
</script>
 
<style lang="scss" scoped>
.header {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
</style>

4.在components下面創(chuàng)建一個(gè)container的文件，在container文件下面創(chuàng)建一個(gè)src文件，然后在src文件下創(chuàng)建navSide文件，在navSide文件下創(chuàng)建index.vue文件

在文件里寫入

<template>
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse="collapse"
  >
    <el-menu-item index="1">
      <el-icon><House></House></el-icon>
      <template #title>導(dǎo)航一</template>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon><Message></Message></el-icon>
      <template #title>導(dǎo)航二</template>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><Grid></Grid></el-icon>
      <template #title>導(dǎo)航三</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><Tools></Tools></el-icon>
      <template #title>導(dǎo)航四</template>
    </el-menu-item>
  </el-menu>
</template>
 
<script lang="ts" setup>
import {ref} from 'vue'
let props=defineProps<{
  collapse:Boolean
}>()
</script>
 
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

這就是封裝伸縮菜單欄組件的代碼。