VUE-Element NavMenu组件

NavMenu这个组件有3个组件：<el-menu>、<el-menu-item>、<el-submenu>

el-menu 导航菜单组件
el-menu-item 表示无子菜单的菜单项
el-submenu 表示有子菜单的菜单项

阅读官网的menu、menu子项 的属性、方法、事件后。

着手最简单的一个案例，当然，现在很多属性还是不熟悉的，需多次复习。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css"> 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  
<div id="app">

<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  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">我的工作台</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-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>

</body>
  
  <script>

var Main = {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
  </script>

</html>

　　index：唯一标识

 

 

出现展开一个菜单所有的菜单都展开或者收缩一个菜单所有的菜单都收缩,把el-menu-item和el-submenu都加上index，标志唯一性。

posted @ 2021-03-15 06:36  程序1088  阅读(311)  评论(0)    收藏  举报