How to use vue3 retractable menu component

Rendering

1. Create a container file under the components, create a src file under the container file, and then create the index.vue file under the src file

Write in this file

<template>
    <div class="common-layout">
      <el-container>
        <el-aside width="auto">
<!--        侧边菜单栏组件-->
        <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 &#39;vue&#39;
import navHeader from &#39;./navHeader/index.vue&#39;
import navSide from &#39;./navSide/index.vue&#39;
const isCollapse=ref<boolean>(false)
 
</script>
 
<style lang="scss" scoped>
 
.el-header {
 padding: 0;
  border-bottom: 1px solid #eeeeee;
}
</style>

2. Write in index.ts under the router file

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

3. In components Create a container file below, create a src file under the container file, then create a navHeader file under the src file, and create an index.vue file under the navHeader file

Write

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

in the file. 4. Create a container file under components, create a src file under the container file, then create a navSide file under the src file, and create an index.vue file under the navSide file

Write

<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>导航一</template>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon><Message></Message></el-icon>
      <template #title>导航二</template>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><Grid></Grid></el-icon>
      <template #title>导航三</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><Tools></Tools></el-icon>
      <template #title>导航四</template>
    </el-menu-item>
  </el-menu>
</template>
 
<script lang="ts" setup>
import {ref} from &#39;vue&#39;
let props=defineProps<{
  collapse:Boolean
}>()
</script>
 
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

in the file. This is the code that encapsulates the retractable menu bar component.

The above is the detailed content of How to use vue3 retractable menu component. For more information, please follow other related articles on the PHP Chinese website!