element-ui 的NavMenu菜单实现水平左右布局 场景# 有的时候我们需要将菜单水平、并且左右进行摆放 效果图# 代码实现# <template><div class="app"><el-divider>官网示例</el-divider><el-menu:default-active="activeIndex"class="el-menu"mode="horizontal"background-color="#545c64"text-color="#fff"activ...
1 修改导航栏的文字大小、 善用F12+ctrlshiftC 比如想改菜单的字体大小,直接F12点击字体: 可以看到该组件对应的类名是el-menu-item,我们在右边的Styles中找到这个类,果然发现了它对应的样式: 我们直接就在页面上修改该样式,增加一个字体大小: 所以我们发现了对应导航栏这种框框里面的内容样式,需要修改的就是.el-m...
最近在写框架,开发主页面的时候布局采用的是左侧菜单栏的形式,因为没有现成的轮子与使用技术栈的原因,选择使用elementui的navmenu控件进行改造,实现多层级的菜单栏展现样式,先上个效果图 因为是使用asp.net mvc5进行的开发,所以不可能使用webpackge纯前端的方式使用vue单文件的形式造轮子,所以经过搜索,决定使用x-temp...
4.菜单行高: /deep/.el-menu-item,/deep/.el-submenu__title{height:45px!important;line-height:45px!important; } 使用: <template><divclass="sidebar"><el-menuclass="sidebar-el-menu":default-active="onRoutes"background-color="rgb(32, 39, 65)"text-color="hsla(0,0%,100%,.65)"active-...
调用时在 app.vue 文件中 <el-menu>中添加 mode="horizontal" 此时样式并不完全是水平样式,,因为我们的组件NavMenu.vue中嵌套了一层div(组件template下必须有一个跟标签),导致elementui 的样式发生变化,因为它调用的方式是( .el-menu–horizontal>.el-submenu)用了>子元素选择器。 所以要在 NavMenu.vue中添加...
</el-menu> 因为默认的下拉菜单无法修改样式(也可能我太菜,找不到在哪里修改),但是ui希望是一个宽屏的下拉菜单,就删除了原有的结构,自己放了一个li标签上去。 css部分 <style> //一定要删除 scoped 不然样式可能无法覆盖 [class*=" el-icon-"], [class^=el-icon-] { //删除了导航菜单上的小箭头 ...
基于element-ui定义自己的Menu 菜单组件 在el-menu组件基础上扩展支持传递数据动态生成菜单项,使用方法与el-menu一样,增加了data 和 props 参数。 /** * 菜单组件 * @module widgets/my-menu * @example * * // 使用说明 */ export default { name: 'MyMenu',...
ui设计图长酱紫~~ 上代码: // 未选中.el-menu-item::before{content:'';width:6px;height:6px;border-radius:50%;background-color:#686868;color:#686868;margin-right:8px;display:inline-block;} // 选中.el-menu-item.is-active::before{content:'';width:6px;height:6px;border-radius:50%;back...
左侧菜单的样式修改,虽然element提供了提供了主题色theme的设置,但这并不能解决UI提供的大量的细节之处,结果自然是UI的bug。 修改后的UI 1.4.3elementUI 这里贴上一段代码: <div:class="isCollapse ? 'view-hide' :'view-cainter'"class="menu-ani"><el-menu:default-active="$route.path.match(/^\/\...
</el-menu-item> </template> <script> export default { name: 'MenuItem', // eslint-disable-next-line vue/require-prop-types props: ['menuData'], data() { return { // menuData: [{ menuId: '1', menuDesc: '导航1', parentMenu: null, children: [{ menuId: '1-1', menuDesc: ...