以下是从element-ui官网上复制过来的菜单栏组件,并加以改造
<el-menu background-color="#333744"text-color="#fff"active-text-color="#409EFF"unique-opened:collapse="isCollapse":collapse-transition="false"router><!--被选中的文本颜色,是否保持只打开一个,折叠展开,是否使用动画,开启路由模式--><!--一级菜单--><el-submenu :index="item.id+''" v-for="item in meunlist" :key="item.id"><!--一级菜单模板--><template slot="title"><!--图标,根据id去定义跌数据里拿图标,因为每个都不同--><i :class="iconsObj[item.id]"></i><!--文本--><span>{{item.authName}}</span></template><!--二级菜单--><el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id"><!--二级菜单模板--><template slot="title"><!--图标--><i class="el-icon-menu"></i><!--文本--><span>{{subItem.authName}}</span></template></el-menu-item></el-submenu></el-menu>
就是下面标红的区域

在标签设置中有多个属性,下面我们来介绍一下他们的用途
text-color="#fff" ------>文字颜色active-text-color="#409EFF" ------>选中的文字颜色unique-opened ------>同时间是否只能打开一个标签:collapse="true" ------>展开折叠(可以定义一个数据,用按钮控制数据true或false):collapse-transition="false" ------>是否使用展开动画router ----->开启路由模式,即字标签的index属性为跳转路径
下图中红色为一级菜单,蓝色为二级菜单,绿色为设置菜单标签的图标和名称

文章转载自程序餐厅,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。




