vue3 element-plus二次封装组件系列之伸缩菜单制作

目录 1、效果  2、主要逻辑代码

1、效果

折叠效果--只剩图标

展开效果--有图标有文字

&nbs p; 2、主要逻辑代码

home.vue--主页代码

<template>
  <div class="common-layout">
    <el-cont ai ner>
      <!-- 侧边栏菜单 -->
      <el-aside width="auto">
        <nav-menu :collpase=" stat e.isCollapse"/>
      </el-aside>
      <el-container>
        <el-header>
          <nav-header v-model:collpase="state.isCollapse" />
        </el-header>
        <el-main> ;m ain</el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
<script  SETUP  lang='ts'>
import {ref, reactive }  From  'vue'
import NavMenu f rom  '@/ component s/navMenu/index.vue'
import NavHeader from '@/components/navHeader/index.vue'
 
const state = reactive({
  // 控制折叠与展开
  isCollapse: false
})
 
</script>
<style sco PE d lang="scss">
   .COM mon-layout {
    width: 100%;
    h ei ght: 100%;
    .el-container {
      height: 100%;
      // 就是不折叠的时候 宽 度是200px，折叠的时候宽度自适应
    }
  }
  svg {
    width: 1em;
    height: 1em;
    m arg in-right: 5px;
  }
</style>

nav-menu组件，侧边菜单组件代码 

<template>
  <el-menu
    default-active="2"
    class="el-menu-vert ical -demo"
    :collapse=" PR ops.collpase"
  >
    <el-menu -i tem index="1">
      <el-icon-menu />
      <template  # t IT le>图标选择器</template>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon-aim />
      <template #title> 省市区 组件</template>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon -s tar />
      <template #title>待定</template>
    </el-menu-item>
  </el-menu>
</template>
 
<script setup lang='ts'>
const props =  define Props<{
  collpase: boolean
}>()
</script>
<style scoped lang="scss">
  svg {
    width: 1em;
    height: 1em;
    mar gin -right: 5px;
  }
  // 记得要有这个，控制侧边菜单宽度， 意思 是折叠的时候，宽度自适应，不着折叠的时候宽度为200px
  .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-e xp and  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<{
  // 这样写，父组件通过v-model传值进来，父组件那边就 不用 在定义事件 改变 这里传过去的值了
  // update:collpase 就会自动改变v-model传过来的值了
  (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>

完整代码地址

以上是基于vue3 vite element-plus搭建的，值的注意的时候，里面的图标组件是经过处理的，所以使用起来，回和常规使用不一样，将el-icon-xx替换为常规的element-plus图标组件使用方式即可

您可能感兴趣的 文章 : Vue结合Element-Plus封装递归组件实现目录示例 Vue3+Vite+TS实现二次封装element-plus业务组件sfasga vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'分析 vue3集成Element-plus实现按需自动引入组件的方法总结 利用Vue3和element-plus实现图片上传组件 vue实现伸缩菜单功能

总结

以上是 为你收集整理的 vue3 element-plus二次封装组件系列之伸缩菜单制作 全部内容，希望文章能够帮你解决 vue3 element-plus二次封装组件系列之伸缩菜单制作 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue3 element-plus二次封装组件系列之伸缩菜单制作的详细内容...