How to use Vue and Element-UI to implement multi-level menu navigation function-Vue.js-php.cn

How to use Vue and Element-UI to implement multi-level menu navigation function

王林

Release： 2023-07-22 16:33:14

Original

2363 people have browsed it

How to use Vue and Element-UI to implement multi-level menu navigation function

Introduction:
As the complexity of modern web applications increases, multi-level menu navigation function has become essential part. As a popular JavaScript framework, Vue is widely used in front-end development for its simplicity, ease of use and flexibility. Element-UI is a set of UI component libraries based on Vue, which provides a rich set of components and styles and is suitable for building modern web interfaces. This article will introduce how to use Vue and Element-UI to implement multi-level menu navigation functions, and provide code examples.

HTML structure:
First, we need to create a container element in the HTML file to host the Vue application. Then, create a <el-menu> component in the container to display menu navigation. The code example is as follows:

<div id="app">
  <el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect">
    <el-submenu index="1">
      <template slot="title">一级菜单</template>
      <el-menu-item index="1-1">二级菜单-1</el-menu-item>
      <el-menu-item index="1-2">二级菜单-2</el-menu-item>
    </el-submenu>
    <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-submenu>
  </el-menu>
</div>

Copy after login

Vue script:
Next, we need to write a Vue script to control the behavior of menu navigation. First, we need to import Vue and Element-UI and create a Vue instance. Then, define a data attribute in the instance to store the index of the currently selected menu item. Finally, define a method handleMenuSelect in the instance to handle the selection event of the menu item. The code sample is as follows:

// 导入Vue和Element-UI
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 创建Vue实例
new Vue({
  el: '#app',
  data: {
    activeIndex: '1-1'   // 当前选中的菜单项的索引
  },
  methods: {
    handleMenuSelect(index) {
      console.log('选中了菜单项', index);
      this.activeIndex = index;   // 更新当前选中的菜单项的索引
    }
  }
});

Copy after login

Complete sample code:
The following is a complete sample code using Vue and Element-UI to implement multi-level menu navigation function:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多级菜单导航</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect">
      <el-submenu index="1">
        <template slot="title">一级菜单</template>
        <el-menu-item index="1-1">二级菜单-1</el-menu-item>
        <el-menu-item index="1-2">二级菜单-2</el-menu-item>
      </el-submenu>
      <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-submenu>
    </el-menu>
  </div>
  <script>
    // 创建Vue实例
    new Vue({
      el: '#app',
      data: {
        activeIndex: '1-1'   // 当前选中的菜单项的索引
      },
      methods: {
        handleMenuSelect(index) {
          console.log('选中了菜单项', index);
          this.activeIndex = index;   // 更新当前选中的菜单项的索引
        }
      }
    });
  </script>
</body>
</html>

Copy after login

Summary:
By using Vue and Element-UI, we can easily implement multi-level menu navigation functionality. This article describes how to implement it through HTML structure and Vue scripts, and provides complete sample code. I hope this article can help you understand and apply the multi-level menu navigation function.

The above is the detailed content of How to use Vue and Element-UI to implement multi-level menu navigation function. For more information, please follow other related articles on the PHP Chinese website!