Element Plus的Menu组件在使用<el-menu>标签定义时,默认是垂直模式。如果你希望将菜单设置为水平模式,需要通过设置mode属性为horizontal来实现。以下是一个简单的示例代码: vue <template> <el-menu mode="horizontal" :default-active="activeIndex"> <el-menu-item index="1">处理...
<el-menu :default-active="activeIndex" mode="horizontal" :router="true" background-color="#091639" text-color="#fff" active-text-color="#FEC002" @select="handleSelect"> <el-menu-item index="/device_new/">设备管理</el-menu-item> <el-menu-item index="/monitor/">状态监测</el-menu...
然后,将el-menu包裹在el-scrollbar组件中,并设置el-scrollbar的宽度和高度。 <template><el-scrollbarstyle="width: 100%; height: 50px;"><el-menumode="horizontal":default-active="activeIndex"><el-menu-itemindex="1">菜单项1</el-menu-item><el-menu-itemindex="2">菜单项2</el-menu-item><...
想要水平菜单:mode='horizontal' 想设置菜单的背景色、文字色、激活菜单的文字色(夜间模式):background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" 只想有一个子菜单展开:unique-opened 打开子菜单的方式可以设置hover:menu-trigger='hover' 不要折叠的动画效果::collapse-transition='fa...
navtype:"horizontal", navselected:"1" } }, methods:{ onSubmit(){ }, getNavType(){ this.navselected=this.$store.state.adminleftnavnum; //store.state.adminleftnavnum里值变化的时候,设置navselected }, selectItems(index){ this.$store.state.adminleftnavnum=index; ...
- mode:设置菜单的模式,可以是水平模式(horizontal)或垂直模式(vertical)。 - default-active:设置默认选中的菜单项。 - unique-opened:是否只保持一个子菜单展开。 - router:是否开启路由模式,如果开启,点击菜单项会自动触发路由跳转。 下面是使用el-menu的示例代码: html <el-menu :default-active="activeIndex"...
<template> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router> <el-menu-item v-for="( item, index ) in navList" :key="index" :index="item.name"> {{ item.navItem }} </el-menu-item> /el-menu> </template> <script> ...
el-menu菜单标签（⾥⾯可以包括：el-submenu和el-menu- item）<el-menu> 1、router属性，若使⽤router属性menu-item的index将对应router的path属性 2、mode,下拉菜单的模式分为horizontal和vertical两种模式 3、background-color，background-color属性为下拉菜单整体的背景颜⾊ 4、text-color，text-color为下拉...
<el-menu ref="menu" class="el-menu-demo" mode="horizontal" background-color="#1b80e9" text-color="#fff" active-text-color="#ffd04b" @open="handleOpen()" @close="handleClose()" :ellipsis="ellipsis" > <el-menu-item index="0" ><a @click="goto('/')" target="_blank">首页</...
1、router属性,若使用router属性menu-item的index将对应router的path属性 2、mode,下拉菜单的模式分为horizontal和vertical两种模式 3、background-color,background-color属性为下拉菜单整体的背景颜色 4、text-color,text-color为下拉菜单中的文字的颜色 5、active-text-color为选中的菜单的颜色 ...