怎么使用vue3 element-plus二次封装组件制作伸缩菜单

发布时间：2023-01-17 09:16:34 作者：iii
来源：亿速云阅读：356

怎么使用 Vue3 Element-Plus 二次封装组件制作伸缩菜单

在现代前端开发中，组件化开发已经成为一种主流趋势。Vue3 作为一款流行的前端框架，提供了强大的组件化能力。而 Element-Plus 是基于 Vue3 的 UI 组件库，提供了丰富的 UI 组件，可以帮助开发者快速构建美观的界面。本文将详细介绍如何使用 Vue3 和 Element-Plus 二次封装组件，制作一个伸缩菜单。

1. 准备工作

在开始之前，我们需要确保已经安装了 Vue3 和 Element-Plus。如果还没有安装，可以通过以下命令进行安装：

npm install vue@next
npm install element-plus

安装完成后，我们需要在项目中引入 Element-Plus。可以在 main.js 或 main.ts 中进行如下配置：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

2. 创建基础菜单组件

首先，我们需要创建一个基础的菜单组件。这个组件将使用 Element-Plus 的 el-menu 组件来实现菜单的基本功能。

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template #title>产品</template>
      <el-menu-item index="2-1">产品列表</el-menu-item>
      <el-menu-item index="2-2">产品详情</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(index) {
      console.log('选中了:', index);
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 200px;
}
</style>

在这个组件中，我们使用了 el-menu 和 el-menu-item 来构建一个简单的垂直菜单。el-submenu 用于创建带有子菜单的菜单项。

3. 添加伸缩功能

接下来，我们需要为菜单添加伸缩功能。我们可以通过控制菜单的宽度来实现这一功能。为此，我们需要在组件中添加一个按钮，用于切换菜单的展开和收起状态。

<template>
  <div class="menu-container">
    <el-button
      class="toggle-button"
      @click="toggleMenu"
    >
      {{ isCollapsed ? '展开' : '收起' }}
    </el-button>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      :collapse="isCollapsed"
      @select="handleSelect"
    >
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template #title>产品</template>
        <el-menu-item index="2-1">产品列表</el-menu-item>
        <el-menu-item index="2-2">产品详情</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">关于我们</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      isCollapsed: false,
    };
  },
  methods: {
    handleSelect(index) {
      console.log('选中了:', index);
    },
    toggleMenu() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
};
</script>

<style scoped>
.menu-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.toggle-button {
  margin-bottom: 10px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
</style>

在这个版本中，我们添加了一个 el-button 按钮，用于切换菜单的展开和收起状态。isCollapsed 数据属性用于控制菜单的展开和收起。当 isCollapsed 为 true 时，菜单会收起；为 false 时，菜单会展开。

4. 优化菜单样式

为了让菜单在收起时更加美观，我们可以对菜单的样式进行一些优化。例如，当菜单收起时，我们可以隐藏菜单项的文本，只显示图标。

<template>
  <div class="menu-container">
    <el-button
      class="toggle-button"
      @click="toggleMenu"
    >
      {{ isCollapsed ? '展开' : '收起' }}
    </el-button>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      :collapse="isCollapsed"
      @select="handleSelect"
    >
      <el-menu-item index="1">
        <i class="el-icon-s-home"></i>
        <span>首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template #title>
          <i class="el-icon-s-goods"></i>
          <span>产品</span>
        </template>
        <el-menu-item index="2-1">产品列表</el-menu-item>
        <el-menu-item index="2-2">产品详情</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">
        <i class="el-icon-s-flag"></i>
        <span>关于我们</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      isCollapsed: false,
    };
  },
  methods: {
    handleSelect(index) {
      console.log('选中了:', index);
    },
    toggleMenu() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
};
</script>

<style scoped>
.menu-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.toggle-button {
  margin-bottom: 10px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu__title span {
  display: none;
}
</style>

在这个版本中，我们为每个菜单项添加了图标，并在菜单收起时隐藏了菜单项的文本。这样，当菜单收起时，用户仍然可以通过图标来识别菜单项。

5. 添加动画效果

为了让菜单的展开和收起更加平滑，我们可以为菜单添加动画效果。Vue3 提供了 transition 组件，可以帮助我们实现这一功能。

<template>
  <div class="menu-container">
    <el-button
      class="toggle-button"
      @click="toggleMenu"
    >
      {{ isCollapsed ? '展开' : '收起' }}
    </el-button>
    <transition name="slide">
      <el-menu
        v-show="!isCollapsed"
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-menu-item index="1">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </el-menu-item>
        <el-submenu index="2">
          <template #title>
            <i class="el-icon-s-goods"></i>
            <span>产品</span>
          </template>
          <el-menu-item index="2-1">产品列表</el-menu-item>
          <el-menu-item index="2-2">产品详情</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
          <i class="el-icon-s-flag"></i>
          <span>关于我们</span>
        </el-menu-item>
      </el-menu>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      isCollapsed: false,
    };
  },
  methods: {
    handleSelect(index) {
      console.log('选中了:', index);
    },
    toggleMenu() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
};
</script>

<style scoped>
.menu-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.toggle-button {
  margin-bottom: 10px;
}

.el-menu-vertical-demo {
  width: 200px;
}

.slide-enter-active,
.slide-leave-active {
  transition: width 0.3s;
}

.slide-enter-from,
.slide-leave-to {
  width: 0;
}
</style>

在这个版本中，我们使用了 transition 组件，并为菜单的展开和收起添加了动画效果。当菜单展开时，宽度会从 0 变为 200px；当菜单收起时，宽度会从 200px 变为 0。

6. 总结

通过以上步骤，我们成功地使用 Vue3 和 Element-Plus 二次封装了一个带有伸缩功能的菜单组件。这个组件不仅具备了基本的菜单功能，还通过添加按钮、优化样式和添加动画效果，提升了用户体验。

在实际项目中，我们可以根据需求进一步扩展这个组件，例如添加权限控制、动态菜单项等功能。希望本文能够帮助你更好地理解如何使用 Vue3 和 Element-Plus 进行组件封装，并为你的项目开发提供一些参考。