So verwenden Sie die einziehbare Menükomponente von vue3

Rendering

1 Erstellen Sie eine Containerdatei unter Komponenten, erstellen Sie eine src-Datei unter der Containerdatei und erstellen Sie dann eine index.vue-Datei unter der src-Datei

Schreiben Sie

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

in diese Datei

2 . Schreiben Sie index.ts unter die Router-Datei

// @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. Erstellen Sie eine Containerdatei unter den Komponenten, erstellen Sie eine src-Datei unter der Containerdatei, erstellen Sie dann eine navHeader-Datei unter der src-Datei und erstellen Sie sie unter der navHeader-Datei index.vue Datei

Schreiben Sie

<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 die Datei 4. Erstellen Sie eine Containerdatei unter Komponenten, erstellen Sie eine src-Datei unter der Containerdatei und erstellen Sie dann eine navSide-Datei unter der src-Datei und erstellen Sie unter der navSide-Datei den Index. vue-Datei

und schreiben Sie

<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 die Datei. Dies ist der Code, der die einziehbare Menüleistenkomponente kapselt.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die einziehbare Menükomponente von vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!