经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3 element-plus二次封装组件系列之伸缩菜单制作
来源:jb51  时间:2023/1/18 8:42:07  对本文有异议

1、效果

折叠效果--只剩图标

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

 2、主要逻辑代码

home.vue--主页代码

  1. <template>
  2. <div class="common-layout">
  3. <el-container>
  4. <!-- 侧边栏菜单 -->
  5. <el-aside width="auto">
  6. <nav-menu :collpase="state.isCollapse"/>
  7. </el-aside>
  8. <el-container>
  9. <el-header>
  10. <nav-header v-model:collpase="state.isCollapse" />
  11. </el-header>
  12. <el-main>Main</el-main>
  13. </el-container>
  14. </el-container>
  15. </div>
  16. </template>
  17. <script setup lang='ts'>
  18. import {ref, reactive } from 'vue'
  19. import NavMenu from '@/components/navMenu/index.vue'
  20. import NavHeader from '@/components/navHeader/index.vue'
  21. const state = reactive({
  22. // 控制折叠与展开
  23. isCollapse: false
  24. })
  25. </script>
  26. <style scoped lang="scss">
  27. .common-layout {
  28. width: 100%;
  29. height: 100%;
  30. .el-container {
  31. height: 100%;
  32. // 就是不折叠的时候宽度是200px,折叠的时候宽度自适应
  33. }
  34. }
  35. svg {
  36. width: 1em;
  37. height: 1em;
  38. margin-right: 5px;
  39. }
  40. </style>

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

  1. <template>
  2. <el-menu
  3. default-active="2"
  4. class="el-menu-vertical-demo"
  5. :collapse="props.collpase"
  6. >
  7. <el-menu-item index="1">
  8. <el-icon-menu />
  9. <template #title>图标选择器</template>
  10. </el-menu-item>
  11. <el-menu-item index="2">
  12. <el-icon-aim />
  13. <template #title>省市区组件</template>
  14. </el-menu-item>
  15. <el-menu-item index="3">
  16. <el-icon-star />
  17. <template #title>待定</template>
  18. </el-menu-item>
  19. </el-menu>
  20. </template>
  21. <script setup lang='ts'>
  22. const props = defineProps<{
  23. collpase: boolean
  24. }>()
  25. </script>
  26. <style scoped lang="scss">
  27. svg {
  28. width: 1em;
  29. height: 1em;
  30. margin-right: 5px;
  31. }
  32. // 记得要有这个,控制侧边菜单宽度,意思是折叠的时候,宽度自适应,不着折叠的时候宽度为200px
  33. .el-menu-vertical-demo:not(.el-menu--collapse) {
  34. width: 200px;
  35. min-height: 400px;
  36. }
  37. .el-menu {
  38. height: 100%;
  39. }
  40. </style>

nav-header组件的代码

  1. <template>
  2. <div class="collapse" @click="handleCollapse">
  3. <el-icon-expand v-if="props.collpase"></el-icon-expand>
  4. <el-icon-fold v-else></el-icon-fold>
  5. </div>
  6. </template>
  7. <script setup lang='ts'>
  8. const props = defineProps<{
  9. collpase: boolean
  10. }>()
  11. const emits = defineEmits<{
  12. // 这样写,父组件通过v-model传值进来,父组件那边就不用在定义事件改变这里传过去的值了
  13. // update:collpase 就会自动改变v-model传过来的值了
  14. (e:'update:collpase', value:boolean):void
  15. }>()
  16. const handleCollapse = ()=>{
  17. emits('update:collpase', !props.collpase)
  18. }
  19. </script>
  20. <style scoped lang="scss">
  21. .collapse {
  22. width: 2em;
  23. svg {
  24. width: 2em;
  25. height: 2em;
  26. }
  27. }
  28. </style>

完整代码地址

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号