返回

Vue3 Element Plus 左侧菜单栏的优雅收缩与展开

前端

使用 Vue3 和 Element Plus 创建收缩式左侧菜单栏

在当今动态且快节奏的网络世界中，用户界面 (UI) 的易用性和美观性对于网站和应用程序的成功至关重要。Element Plus 是一个流行的 Vue.js UI 库，它提供了丰富的组件和功能，使开发人员能够轻松地创建现代而响应式的应用程序。在这篇博文中，我们将探讨如何使用 Vue3 和 Element Plus 实现左侧菜单栏的收缩与展开功能，从而增强用户体验并提升应用程序的整体外观。

准备工作

在开始之前，确保您的开发环境已满足以下要求：

  • 已安装 Node.js 和 npm
  • 已安装 Vue3 和 Element Plus
  • 一个文本编辑器或 IDE

项目结构

我们将创建一个名为 "my-app" 的项目，其目录结构如下：

my-app
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   │   ├── Aside.vue
│   │   └── Menu.vue
│   ├── main.js
│   └── router
│       └── index.js

安装 Element Plus

在终端中进入项目目录，使用以下命令安装 Element Plus：

npm install element-plus

创建组件

在 "src/components" 目录下，创建两个 Vue.js 组件：

Aside.vue ：

<template>
  <el-aside :collapsed="collapsed">
    <el-menu
      :default-active="active"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item index="1">Home</el-menu-item>
      <el-menu-item index="2">About</el-menu-item>
      <el-menu-item index="3">Contact</el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      active: '1'
    }
  },
  methods: {
    handleOpen() {
      this.collapsed = false;
    },
    handleClose() {
      this.collapsed = true;
    }
  }
}
</script>

<style>
.el-aside {
  width: 200px;
  background-color: #333;
}
</style>

Menu.vue ：

<template>
  <div class="menu">
    <el-menu
      :default-active="active"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item index="1">Home</el-menu-item>
      <el-menu-item index="2">About</el-menu-item>
      <el-menu-item index="3">Contact</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      active: '1'
    }
  },
  methods: {
    handleOpen() {
      this.collapsed = false;
    },
    handleClose() {
      this.collapsed = true;
    }
  }
}
</script>

<style>
.menu {
  width: 200px;
  background-color: #333;
}
</style>

注册组件

在 "src/App.vue" 文件中，注册 "Aside.vue" 和 "Menu.vue" 组件为全局组件：

import Aside from './components/Aside.vue'
import Menu from './components/Menu.vue'

export default {
  components: {
    Aside,
    Menu
  }
}

使用组件

在 "src/App.vue" 文件中，使用 "Aside.vue" 和 "Menu.vue" 组件：

<template>
  <div id="app">
    <Aside />
    <Menu />
  </div>
</template>

运行项目

在终端中进入项目目录，使用以下命令运行项目：

npm run serve

预览效果

打开浏览器，访问 "http://localhost:8080"，您将看到一个带有可收缩左侧菜单栏的页面。点击菜单栏中的任何选项卡，即可在缩小和展开状态之间切换。

结语

通过这篇博文，我们了解了如何使用 Vue3 和 Element Plus 创建一个可收缩的左侧菜单栏。这种功能对于在移动设备或狭小空间中显示大量信息非常有用。Element Plus 提供了多种组件和功能，使开发人员能够轻松地创建美观且用户友好的应用程序。希望本文能为您的下一次 Vue.js 项目提供灵感和指导。

常见问题解答

  1. 如何更改菜单栏的宽度？
    在 "Aside.vue" 和 "Menu.vue" 组件的样式中，可以修改 "width" 属性以设置菜单栏的宽度。

  2. 如何更改菜单栏的背景色？
    在 "Aside.vue" 和 "Menu.vue" 组件的样式中，可以修改 "background-color" 属性以更改菜单栏的背景色。

  3. 如何添加图标到菜单项？
    在 "el-menu-item" 组件中，可以使用 "icon" 属性添加图标。例如：<el-menu-item index="1" icon="el-icon-home">Home</el-menu-item>。

  4. 如何禁用菜单项？
    在 "el-menu-item" 组件中，可以使用 "disabled" 属性禁用菜单项。例如：<el-menu-item index="1" disabled>Disabled Item</el-menu-item>。

  5. 如何在点击菜单项时执行操作？
    在 "el-menu-item" 组件中，可以使用 "@click" 事件处理程序在点击菜单项时执行操作。例如：<el-menu-item index="1" @click="handleMenuItemClick">Home</el-menu-item>。