vue使用elementui的el-menu的折叠菜单collapse示例详解

 更新时间:2023年12月07日 11:31:09   作者:打不着的大喇叭  
这篇文章主要介绍了vue使用elementui的el-menu的折叠菜单collapse示例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

由于我的是在el-menu所在组件外面的兄弟组件设置是否折叠的控制,我用事件总线bus进行是否折叠传递 

参数说明类型可选值默认值
collapse是否水平折叠收起菜单(仅在 mode 为 vertical 时可用)booleanfalse
background-color菜单的背景色(仅支持 hex 格式)string#ffffff
text-color菜单的文字颜色(仅支持 hex 格式)string#303133
active-text-color当前激活菜单的文字颜色(仅支持 hex 格式)string#409EFF
default-active当前激活菜单的 indexstring
unique-opened是否只保持一个子菜单的展开booleanfalse
router是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转booleanfalse

在左边的折叠菜单组件中, 

<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    background-color="#001529"
    text-color="#fff"
    active-text-color="#1378e6"
    :unique-opened="true"
    :collapse="iscollapse"
  >
    <h2 class="title">A2</h2>
    <el-submenu index="/">
      <template slot="title">
        <i class="el-icon-s-home"></i>
        <span>首页</span>
      </template>
      <el-menu-item index="/everydayCheck">每日质检</el-menu-item>
      <el-menu-item index="/order">采购订单</el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: "Menu",
  data() {
    return {
      // 在 el-menu 中绑定 :collapse="iscollapse" ,预设值为 false,展开菜单
      iscollapse: false,
    };
  },
  mounted() {
    // 用事件总线绑定事件,兄弟组件触发后,就传递参数true/false,控制是否展开
    this.$bus.$on("clickCollapse", (iscollapse) => {
      this.iscollapse = iscollapse;
    });
  },
};
</script>
<style scoped>
/* 设置展开宽度,不至于收缩出现bug */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.title {
  margin: 20px 0 0 20px;
  color: #fff;
}
.el-menu {
  border-right: 0;
  height: 100vh;
}
.el-menu /deep/.el-submenu__title {
  font-size: 13px !important;
}
.el-menu-vertical-demo {
  overflow-x: hidden;
  overflow-y: hidden;
}
</style>

 在右边的兄弟控制折叠菜单的组件中,

<template>
  <div class="container">
    <div class="left">
      <i :class="iscollapse" @click="clickCollapse"></i>
      <h6>欢迎进入 管理台</h6>
      <span>内部系统使用手册 ></span>
    </div>
    <div class="right">
      <span><i class="el-icon-date"></i>授课日程</span>
      <span><i class="el-icon-tickets"></i>导入/导出任务</span>
      <span class="user">
        <img src="./images/headPortrait.gif" alt="" />
        泡泡龙
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      // elementui中的字体图标
      iscollapse: "el-icon-s-fold",
      // 传值flag阀门
      flag: false,
    };
  },
  methods: {
    clickCollapse() {
      // 1、每次传递先取反
      // 2、触发事件总线的折叠事件,传值判断是否折叠
      // 3、三元表达式改变折叠按钮的图标
      this.flag = !this.flag;
      this.$bus.$emit("clickCollapse", this.flag);
      this.iscollapse =
        this.flag == true ? "el-icon-s-unfold" : "el-icon-s-fold";
    },
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  padding: 0 20px 0 15px;
  font-size: 13px;
  height: 58px;
  border-bottom: 1px solid #cecece;
}
.container > div {
  display: flex;
  align-items: center;
}
.left i {
  padding: 5px;
  font-size: 23px;
  cursor: pointer;
}
.left h6 {
  margin: 0 20px 0 10px;
}
.left span {
  color: #3f9cfb;
  font-weight: 700;
}
.right span > i {
  margin-right: 5px;
}
.right span:nth-child(1) {
  color: #ff6b00;
  font-weight: 700;
}
.right span:nth-child(2) {
  margin: 0 20px;
  color: #6c6c6c;
}
.right span:nth-child(3) {
  font-weight: 700;
  color: #101010;
}
.right .user {
  display: flex;
  align-items: center;
}
.right .user img {
  margin-right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 20%;
}
</style>

到此这篇关于vue使用elementui的el-menu的折叠菜单collapse的文章就介绍到这了,更多相关vue el-menu折叠菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • VueJs中toRef与toRefs函数对比详解

    VueJs中toRef与toRefs函数对比详解

    这篇文章主要为大家介绍了VueJs中toRef与toRefs函数对比详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue项目的html如何引进public里面的js文件

    vue项目的html如何引进public里面的js文件

    这篇文章主要介绍了vue项目的html如何引进public里面的js文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 大前端代码重构之事件拦截iOS Flutter Vue示例分析

    大前端代码重构之事件拦截iOS Flutter Vue示例分析

    这篇文章主要为大家介绍了大前端代码重构之事件拦截iOS Flutter Vue示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 去掉vue 中的代码规范检测两种方法(Eslint验证)

    去掉vue 中的代码规范检测两种方法(Eslint验证)

    我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭,这里脚本之家小编给大家带来了去掉vue 中的代码规范检测两种方法(Eslint验证),一起看看吧
    2018-03-03
  • 在Vue中是如何封装axios

    在Vue中是如何封装axios

    这篇文章主要介绍在Vue中是如何封装axios的相关资料,axios的封装主要是帮助我们简化代码和利于后期的更新维护,感兴趣的小伙伴可以和小编一起来阅读下面文章的具体内容
    2021-10-10
  • Vue ElementUI中el-table表格嵌套样式问题小结

    Vue ElementUI中el-table表格嵌套样式问题小结

    这篇文章主要介绍了Vue ElementUI中el-table表格嵌套样式问题小结,两个表格嵌套,当父表格有children数组时子表格才展示,对Vue ElementUI中el-table表格嵌套样式问题感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • 在elementui中Notification组件添加点击事件实例

    在elementui中Notification组件添加点击事件实例

    这篇文章主要介绍了在elementui中Notification组件添加点击事件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 详解Nuxt内导航栏的两种实现方式

    详解Nuxt内导航栏的两种实现方式

    这篇文章主要介绍了详解Nuxt内导航栏的两种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • VUE实现表单元素双向绑定(总结)

    VUE实现表单元素双向绑定(总结)

    本篇文章主要介绍了VUE实现表单元素双向绑定(总结) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue中setup语法糖写法实例

    vue中setup语法糖写法实例

    如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup语法糖的相关资料,需要的朋友可以参考下
    2022-12-12

最新评论