怎么使用vue3?element-plus二次封裝組件制作伸縮菜單

本篇內(nèi)容主要講解“怎么使用vue3 element-plus二次封裝組件制作伸縮菜單”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么使用vue3 element-plus二次封裝組件制作伸縮菜單”吧!

1、效果

折疊效果--只剩圖標(biāo)

展開(kāi)效果--有圖標(biāo)有文字

 2、主要邏輯代碼

home.vue--主頁(yè)代碼

<template>
  <div class="common-layout">
    <el-container>
      <!-- 側(cè)邊欄菜單 -->
      <el-aside width="auto">
        <nav-menu :collpase="state.isCollapse"/>
      </el-aside>
      <el-container>
        <el-header>
          <nav-header v-model:collpase="state.isCollapse" />
        </el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
<script setup lang='ts'>
import {ref, reactive } from 'vue'
import NavMenu from '@/components/navMenu/index.vue'
import NavHeader from '@/components/navHeader/index.vue'
 
const state = reactive({
  // 控制折疊與展開(kāi)
  isCollapse: false
})
 
</script>
<style scoped lang="scss">
  .common-layout {
    width: 100%;
    height: 100%;
    .el-container {
      height: 100%;
      // 就是不折疊的時(shí)候?qū)挾仁?00px，折疊的時(shí)候?qū)挾茸赃m應(yīng)
    }
  }
  svg {
    width: 1em;
    height: 1em;
    margin-right: 5px;
  }
</style>

nav-menu組件，側(cè)邊菜單組件代碼 

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="props.collpase"
  >
    <el-menu-item index="1">
      <el-icon-menu />
      <template #title>圖標(biāo)選擇器</template>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon-aim />
      <template #title>省市區(qū)組件</template>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon-star />
      <template #title>待定</template>
    </el-menu-item>
  </el-menu>
</template>
 
<script setup lang='ts'>
const props = defineProps<{
  collpase: boolean
}>()
</script>
<style scoped lang="scss">
  svg {
    width: 1em;
    height: 1em;
    margin-right: 5px;
  }
  // 記得要有這個(gè)，控制側(cè)邊菜單寬度，意思是折疊的時(shí)候，寬度自適應(yīng)，不著折疊的時(shí)候?qū)挾葹?00px
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu {
    height: 100%;
  }
</style>

nav-header組件的代碼

<template>
  <div class="collapse" @click="handleCollapse">
    <el-icon-expand v-if="props.collpase"></el-icon-expand>
    <el-icon-fold v-else></el-icon-fold>
  </div>
</template>
 
<script setup lang='ts'>
const  props = defineProps<{
  collpase: boolean
}>()
const emits = defineEmits<{
  // 這樣寫(xiě)，父組件通過(guò)v-model傳值進(jìn)來(lái)，父組件那邊就不用在定義事件改變這里傳過(guò)去的值了
  // update:collpase 就會(huì)自動(dòng)改變v-model傳過(guò)來(lái)的值了
  (e:'update:collpase', value:boolean):void
}>()
 
const handleCollapse = ()=>{
  emits('update:collpase', !props.collpase)
}
 
</script>
<style scoped lang="scss">
.collapse {
  width: 2em;
  svg {
    width: 2em;
    height: 2em;
  }
}
</style>

到此，相信大家對(duì)“怎么使用vue3 element-plus二次封裝組件制作伸縮菜單”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！