Comment utiliser le composant de menu rétractable vue3

Rendering

1. Créez un fichier conteneur sous composants, créez un fichier src sous le fichier conteneur, puis créez un fichier src sous le fichier src Créez le fichier index.vue sous

Dans ce fichier, écrivez

<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. .ts sous le fichier du routeur Écrivez

// @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 Créez un fichier conteneur sous les composants, créez un fichier src sous le fichier conteneur, puis créez un fichier navHeader sous le fichier src et créez un index.vue. fichier sous le fichier navHeader# 🎜🎜#

Écrivez dans le fichier

<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>

4. Créez un fichier conteneur sous composants et créez un conteneur. fichier en dessous. fichier src, puis créez un fichier navSide sous le fichier src et créez un fichier index.vue sous le fichier navSide 🎜🎜# dans le fichier

<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>

C'est le code qui encapsule le composant de la barre de menu rétractable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!