快捷導(dǎo)航

element-plus默認(rèn)菜單打開(kāi)步驟

更新時(shí)間：2024年08月23日 09:58:30 作者：庫(kù)庫(kù)林_沙琪馬

在 Vue 3 中使用 Element Plus 的 <el-menu> 組件時(shí),默認(rèn)情況下菜單項(xiàng)是關(guān)閉狀態(tài)的,如果你想讓某個(gè)菜單項(xiàng)默認(rèn)處于展開(kāi)狀態(tài),你可以通過(guò)設(shè)置菜單項(xiàng)的 default-active 屬性來(lái)實(shí)現(xiàn),這篇文章主要介紹了element-plus默認(rèn)菜單打開(kāi),需要的朋友可以參考下

在 Vue 3 中使用 Element Plus 的 <el-menu> 組件時(shí)，默認(rèn)情況下菜單項(xiàng)是關(guān)閉狀態(tài)的。如果你想讓某個(gè)菜單項(xiàng)默認(rèn)處于展開(kāi)狀態(tài)，你可以通過(guò)設(shè)置菜單項(xiàng)的 default-active 屬性來(lái)實(shí)現(xiàn)。

默認(rèn)寫(xiě)法

步驟 1: 設(shè)置 default-active

你需要在 <el-menu> 組件上設(shè)置 default-active 屬性，并為其提供一個(gè)值，該值應(yīng)該是你希望默認(rèn)激活的菜單項(xiàng)的索引或路徑。

示例代碼

假設(shè)你有一個(gè)簡(jiǎn)單的菜單結(jié)構(gòu)，其中包含一個(gè)子菜單，你想讓這個(gè)子菜單默認(rèn)展開(kāi)：

<template>
  <el-menu :default-active="activeIndex" class="el-menu-vertical-demo">
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>導(dǎo)航一</span>
      </template>
      <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
      <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
      <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><document /></el-icon>
      <template #title>導(dǎo)航二</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><setting /></el-icon>
      <template #title>導(dǎo)航三</template>
    </el-menu-item>
  </el-menu>
</template>
<script setup>
import { ref } from 'vue';
import { Location, Document, Setting } from '@element-plus/icons-vue';
const activeIndex = ref('1-1');  // 默認(rèn)激活 "1-1" 菜單項(xiàng)
</script>

說(shuō)明

default-active 屬性：設(shè)置為 '1-1'，表示默認(rèn)激活 index="1-1" 的菜單項(xiàng)。
el-sub-menu：用于創(chuàng)建子菜單。
el-menu-item：用于創(chuàng)建菜單項(xiàng)。
<el-icon>：用于顯示圖標(biāo)。
<template #title>：用于自定義菜單項(xiàng)的標(biāo)題。

注意事項(xiàng)

如果你想讓一個(gè)子菜單默認(rèn)展開(kāi)，可以將 default-active 設(shè)置為該子菜單中的任意一個(gè)子菜單項(xiàng)的 index。
如果你想讓多個(gè)子菜單默認(rèn)展開(kāi)，可以使用數(shù)組形式的 default-active 屬性。

示例：多個(gè)子菜單默認(rèn)展開(kāi)

如果你想讓多個(gè)子菜單默認(rèn)展開(kāi)，你可以將 default-active 設(shè)置為一個(gè)數(shù)組，包含你希望默認(rèn)激活的菜單項(xiàng)的索引。

<template>
  <el-menu :default-active="['1-1', '2']" class="el-menu-vertical-demo">
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>導(dǎo)航一</span>
      </template>
      <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
      <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
      <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><document /></el-icon>
      <template #title>導(dǎo)航二</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><setting /></el-icon>
      <template #title>導(dǎo)航三</template>
    </el-menu-item>
  </el-menu>
</template>
<script setup>
import { ref } from 'vue';
import { Location, Document, Setting } from '@element-plus/icons-vue';
const activeIndex = ref(['1-1', '2']);  // 默認(rèn)激活 "1-1" 和 "2" 菜單項(xiàng)
</script>

在這個(gè)例子中，default-active 設(shè)置為 ['1-1', '2']，表示默認(rèn)激活 index="1-1" 和 index="2" 的菜單項(xiàng)。這將使得 index="1" 的子菜單及其第一個(gè)子菜單項(xiàng) index="1-1" 處于展開(kāi)狀態(tài)，并且 index="2" 的菜單項(xiàng)也處于激活狀態(tài)。

特殊寫(xiě)法

Menu 組件

<template>
    <template v-for="(item, index) in menuList" :key="index">
        <!-- 沒(méi)有子路由 -->
        <template v-if="!item.children">
            <el-menu-item v-if="!item.meta.hidden" :index="item.path" @click="goRoute">
                <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <template #title>
                    <span>{{ item.meta.title }}</span>
                </template>
            </el-menu-item>
        </template>
        <!-- 只有一個(gè)子路由 -->
        <template v-if="item.children && item.children.length == 1">
            <el-menu-item v-if="!item.children[0].meta.hidden" :index="item.children[0].path" @click="goRoute">
                <el-icon>
                    <component :is="item.children[0].meta.icon"></component>
                </el-icon>
                <template #title>
                    <span>{{ item.children[0].meta.title }}</span>
                </template>
            </el-menu-item>
        </template>
        <!-- 有多個(gè)子路由 -->
        <el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path">
            <template #title>
                <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{ item.meta.title }}</span>
            </template>
            <Menu :menuList="item.children"></Menu>
        </el-sub-menu>
    </template>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
// 引入路由器
const $router = useRouter()
// 獲取父組件傳遞的數(shù)據(jù)
defineProps(['menuList'])
// 點(diǎn)擊菜單的回調(diào)
const goRoute = (vc: any) => {
    // 路由跳轉(zhuǎn)
    $router.push(vc.index)
}
</script>
<script lang="ts">
export default {
    name: 'Menu'
}
</script>
<style scoped></style>

菜單欄組件：

<template>
    <div class="layout_container">
        <!-- 左側(cè)菜單 -->
        <div class="layout_slider">
            <Logo></Logo>
            <!-- 展示菜單 -->
            <!-- 滾動(dòng)組件 -->
            <el-scrollbar class="scrollbar">
                <!-- 菜單組件 -->
                <el-menu background-color="#2e2e2e" text-color="white" active-text-color="yellowgreen" :default-active="$route.path">
                    <Menu :menuList="userStore.menuRoutes"></Menu>
                </el-menu>
            </el-scrollbar>
        </div>
        <!-- 頂部導(dǎo)航 -->
        <div class="layout_tabbar">456</div>
        <!-- 內(nèi)容展示區(qū)域 -->
        <div class="layout_main">
            <Main></Main>
        </div>
    </div>
</template>
<script setup lang="ts">
// 引入左側(cè)菜單logo子組件
import Logo from './logo/index.vue'
// 引入菜單組件
import Menu from './menu/index.vue'
// 右側(cè)內(nèi)容的展示區(qū)
import Main from './main/index.vue'
// 獲取路由對(duì)象
import { useRoute } from 'vue-router';
// 獲取用戶(hù)相關(guān)的小倉(cāng)庫(kù)
import useUserStore from '@/store/modules/user';
let userStore = useUserStore();
// 獲取路由對(duì)象
let $route = useRoute();
</script>
<style scoped lang="scss">
.layout_container {
    width: 100%;
    height: 100vh;
    background-color: red;
    .layout_slider {
        width: $base-menu-width;
        height: 100vh;
        background-color: $base-menu-bg;
        .scrollbar {
            width: $base-menu-width;
            height: calc(100vh - $base-menu-logo-height);
            .el-menu {
                border-right: none;
            }
        }
    }
    .layout_tabbar {
        position: fixed;
        width: calc(100% - $base-menu-width);
        height: $base-tabbar-height;
        background-color: cyan;
        top: 0px;
        left: $base-menu-width;
    }
    .layout_main {
        position: fixed;
        width: calc(100% - $base-menu-width);
        height: calc(100% - $base-tabbar-height);
        background-color: yellow;
        top: $base-tabbar-height;
        left: $base-menu-width;
        padding: 20px;
        overflow: auto;
    }
}
</style>

到此這篇關(guān)于element-plus默認(rèn)菜單打開(kāi)的文章就介紹到這了,更多相關(guān)element-plus菜單打開(kāi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: