element插件菜单demo

最新推荐文章于 2025-02-07 10:46:46 发布

$团长$

最新推荐文章于 2025-02-07 10:46:46 发布

阅读量1.9k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/kairui_guxiaobai/article/details/97260301

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍如何使用Vue结合Element UI构建复杂的菜单系统，包括顶部菜单、侧边栏菜单及响应式body内容。通过代码示例，演示了组件嵌套使用、子组件向父组件传值等关键知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搭建安装vue

引入element库

在main.js中引入element库：
/* 引入element */ import ElementUI from 'element-ui'

构思demo原型

在写之前，得想想要写什么，最后写完需要达到一个怎样的效果。我们本次demo主要是实践菜单规划，主要包括三个部分：顶部菜单、侧栏菜单、body内容。点击侧面导航栏会显示对于body内容。效果如下：
在这里插入图片描述

菜单组件‘el-submenu’应用

开始开发菜单组件前，可以参考下官网文档打用法介绍点这里
顶部菜单代码：

<template>
  <div id="top">
  <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  style="height: 5rem"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
    <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台1</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
 <el-submenu index="3">
    <template slot="title">我的工作台2</template>
    <el-menu-item index="3-1">选项1</el-menu-item>
    <el-menu-item index="3-2">选项2</el-menu-item>
    <el-menu-item index="3-3">选项3</el-menu-item>
 </el-submenu>
  <el-submenu index="4">
    <template slot="title">我的工作台3</template>
    <el-menu-item index="4-1">选项1</el-menu-item>
    <el-menu-item index="4-2">选项2</el-menu-item>
    <el-menu-item index="4-3">选项3</el-menu-item>
 </el-submenu>

</el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
/* #top{
  width: auto;
  height: 30px;
  background: gray;
} */
</style>

侧栏菜单代码：

<template>
  <div id='HeaderMenu'>
    <!-- <el-row class='tac'> -->
      <el-col :span='2' >
        <el-menu
        background-color='#545c64'
        text-color='#303133'
        active-text-color="#ffd04b"
        default-active="1">
        <el-menu-item index="1" style="font-size: large;" v-on:click="notifyParentCom('comm1')">
          <i class='el-icon-menu'></i>
          <span slot="title" > 导航一</span>
        </el-menu-item>
        <el-menu-item index="2" style="font-size: large;" v-on:click="notifyParentCom('comm2')">
          <i class='el-icon-menu'></i>
          <span slot="title"> 导航二</span>
        </el-menu-item>
        <el-menu-item index="3" style="font-size: large;" v-on:click="notifyParentCom('comm3')">
          <i class='el-icon-menu'></i>
          <span slot="title"> 导航三</span>
        </el-menu-item>
        <el-menu-item index="4" style="font-size: large;" v-on:click="notifyParentCom('comm4')">
          <i class='el-icon-menu'></i>
          <span slot="title"> 导航四</span>
        </el-menu-item>
        <el-menu-item index="5" style="font-size: large;" v-on:click="notifyParentCom('comm5')">
          <i class='el-icon-menu'></i>
          <span slot="title"> 导航五</span>
        </el-menu-item>
        <el-menu-item index="6" style="font-size: large;" v-on:click="notifyParentCom('comm6')">
          <i class='el-icon-menu'></i>
          <span slot="title"> 导航六</span>
        </el-menu-item>
        <el-menu-item index="7" style="font-size: large;" v-on:click="notifyParentCom('comm7')">
          <i class='el-icon-menu'></i>
          <span slot="title"> 导航七</span>
        </el-menu-item>
        <el-menu-item index="8" style="font-size: large;" v-on:click="notifyParentCom('comm8')">
          <i class='el-icon-menu'></i>
          <span slot="title"> 导航八</span>
        </el-menu-item>
        <el-menu-item index="9" style="font-size: large;" v-on:click="notifyParentCom('comm9')">
          <i class='el-icon-menu'></i>
          <span slot="title"> 导航九</span>
        </el-menu-item>
        <el-menu-item index="10" style="font-size: large;" v-on:click="notifyParentCom('comm10')">
          <i class='el-icon-menu'></i>
          <span slot="title"> 导航十</span>
        </el-menu-item>
        </el-menu>
      </el-col>
    <!-- </el-row> -->
  </div>

</template>
<script>
export default {
  data(){
    return{
      
    }
  },
  methods:{
    notifyParentCom(target){
      console.log(target);
      switch(target){
        case 'comm1':
          this.$emit('childMenuSwitch','comm1')
          break;
        case 'comm2':
          this.$emit('childMenuSwitch','comm2')
          break;
        case 'comm3':
          this.$emit('childMenuSwitch','comm3')
          break;
        case 'comm4':
          this.$emit('childMenuSwitch','comm4')
          break;
        case 'comm5':
          this.$emit('childMenuSwitch','comm5')
          break;
        case 'comm6':
          this.$emit('childMenuSwitch','comm6')
          break;
        case 'comm7':
          this.$emit('childMenuSwitch','comm7')
          break;
        case 'comm8':
          this.$emit('childMenuSwitch','comm8')
          break;
        case 'comm9':
          this.$emit('childMenuSwitch','comm9')
          break;
        case 'comm10':
          this.$emit('childMenuSwitch','comm10')
          break;
      }
    }
  }
}
</script>
<style>

</style>

body内容样例：

<template>
    <div id="comm">
        <el-col :span="21" style="margin-top: 1rem">
         <el-row :gutter="30" class="row-bg" type="flex" align="top" style="margin: 1.5% 1.5% 1.5% 1.5%">
                <el-col :span="6">
                    <demo2 ></demo2>
                </el-col>
            </el-row>
        </el-col>
    </div>
</template>
<script>
import demo2 from './demo2.vue'
export default {
    components:{
        demo2,
    },
}
</script>

总结知识点

1、组件嵌套使用
先引用注册才能使用：

2、子组件向父组件传值：自定义事件，this. $e m i t, 发送信息，在父组件中用 v - o n 监听子组件的事件! [在这里插入图片描述] (h t t p s : / / i m g - b l o g . c s d n i m g . c n / 20190725151740771 . p n g) 在子组件中用$ emit监听组件变化传递给父组件，其中第一个参数是监听事件名字，第二个参数是返回给父组件的结果
在这里插入图片描述