Cara menggunakan komponen menu yang boleh ditarik balik vue3

Perenderan

1 Cipta fail bekas di bawah komponen, buat fail src di bawah fail kontena, dan kemudian buat fail index.vue di bawah fail src <.>

Dalam fail ini tulis

<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 Dalam index.ts di bawah fail penghala tulis

// @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 fail kontena di bawah, buat fail src di bawah fail kontena, kemudian buat fail navHeader di bawah fail src dan buat fail index.vue di bawah fail navHeader

Tulis

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

dalam fail 4. Buat fail bekas di bawah komponen, buat fail src di bawah fail kontena, kemudian buat fail navSide di bawah fail src dan buat fail index.vue di bawah fail navSide.

Tulis

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

dalam fail Ini ialah kod yang merangkum komponen bar menu yang boleh ditarik balik.

Atas ialah kandungan terperinci Cara menggunakan komponen menu yang boleh ditarik balik vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!