Element UI学习4--NavMenu 导航菜单

秒速五厘米 2023-01-03 04:49 168阅读 0赞

## 1、顶栏 ##

导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。  
在菜单中通过submenu组件可以生成二级菜单。

export default { 
        data() { 
          return { 
            activeIndex: '1',
          };
        },
        methods: { 
          handleSelect(key, keyPath) { 
            console.log(key, keyPath);
          }
          }
          }

如图：  
![在这里插入图片描述][202101071538595.jpg_pic_center]  
Menu 还提供了background-color（菜单的背景色）  
text-color（菜单的文字颜色）  
active-text-color（当前激活菜单的文字颜色）

el-menu 
            :default-active="activeIndex" 
            class="el-menu-demo" 
            mode="horizontal" 
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
                <el-submenu index="1">
                    <template slot="title">水果</template>
                    <el-menu-item index="1-1">草莓</el-menu-item>
                    <el-menu-item index="1-2">芒果</el-menu-item>
                    <el-menu-item index="1-3">哈密瓜</el-menu-item>
                    <el-menu-item index="1-4">西瓜</el-menu-item>
                    <el-menu-item index="1-5">葡萄</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">蔬菜</template>
                    <el-menu-item index="2-1">青菜</el-menu-item>
                    <el-menu-item index="2-2">油麦菜</el-menu-item>
                    <el-menu-item index="2-3">菠菜</el-menu-item>
                    <el-menu-item index="2-4">空心菜</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">饮料</template>
                    <el-submenu index="3-1">
                        <template slot="title">可乐</template>
                        <el-menu-item index="3-1-1">小</el-menu-item>
                        <el-menu-item index="3-1-2">中</el-menu-item>
                        <el-menu-item index="3-1-3">大</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3-2">玉米汁</el-menu-item>
                    <el-menu-item index="3-3">西瓜汁</el-menu-item>
                    <el-menu-item index="3-4">橙汁</el-menu-item>
                </el-submenu>
                <el-menu-item index="4">消息中心</el-menu-item>
                <el-menu-item index="5">订单管理</el-menu-item>
            </el-menu>

如图：  
![在这里插入图片描述][20210107154202458.jpg_pic_center]

## 2、侧栏 ##

<el-row class="tac">
                <el-col :span="12">
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <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-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-document"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]

## 3、折叠 ##

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
            <el-row class="tac">
                <el-col :span="12">
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                    
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <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-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-document"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]

[202101071538595.jpg_pic_center]: /images/20221119/99f0a9a37cdb4c81b0dd1e3e526de3a2.png
[20210107154202458.jpg_pic_center]: /images/20221119/c102de7876c844ec8ab23956f9571b38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/c90be8745135436bbf1904e5b972328d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/7a853443d2814c1183b74515a1ca0545.png