怎么使用vue3?element-plus二次封裝組件制作伸縮菜單

怎么使用 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 進行組件封裝，并為你的項目開發提供一些參考。