主要就是添加了这个属性:collapse-transition="false",这个属性的就是是否开启折叠动画效果,如果我们不进行设置,默认时开启的,现在我们将el-menu这个默认的效果关闭。使用之后就解决了这个问题,给出的解释就是可能是和我们自己定义的过渡效果相冲突了所以就使用这个属性关闭el-menu自带的过渡效果,这样就可以得到解决了 ...
官网的折叠展开图标 要实现的: 思路: 1、首先替换折叠展开图标 2、使用right复制,把图标移动到需要展示的地方 .el-submenu__title { .el-submenu__icon-arrow { right: 220px; margin-top: -5px; } .el-icon-a
mode:它决定了横向还是纵向的menu,这里的场景是纵向的。 collapse:它提供了折叠的能力,如果为true就直接折叠了,如果为false就不折叠了。这里只有纵向需要折叠,横向是不需要折叠的。 菜单栏有router模式,当你使用router模式的时候,它会将侧边的导航栏和你的pass进行关联,也就是和router下面的pass进行相应的关联。每次...
由于我的是在el-menu所在组件外面的兄弟组件设置是否折叠的控制,我用事件总线bus进行是否折叠传递 参数 说明 类型 可选值 默认值 collapse 是否水平折叠收起菜单(仅在 mode 为 vertical 时可用) boolean — false background-color 菜单的背景色(仅支持 hex 格式) string — #ffffff text-color 菜单的文字颜色...
不要折叠的动画效果::collapse-transition='false' 点击菜单项直接去相应的路由:router,且相应的index设置成路由路径 附注代码 最近试着手写实现el-menu组件,有兴趣可以看下 基础介绍代码 section(style='width:210px') el-menu el-menu-item 单项菜单1 el-menu-item 单项菜单2 el-submenu template(slot='title...
在elementui中,el-menu的折叠和展开动画是通过Vue的transition组件实现的。通过transition组件的name属性和CSS过渡类名实现动画效果,同时结合el-menu的collapse-transition属性来触发动画。具体实现方法可参考elementui官方文档或相关教程。通过设置不同的过渡类名和CSS属性,可以实现不同的折叠和展开动画效果。例如,可以设置op...
vue使用el-menu折叠时,导航文字不隐藏问题 原因:<el-menu>嵌套中出现了意料之外的<div>,而<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之一 方案一:(推荐) 改样式 /*隐藏文字*/.el-menu--collapse .el-submenu__title span {...
场景描述: 比如我们的home首页(父路由) 是一个 el-menu 的菜单栏。 同时,导航头部有一个反馈意见建议的按钮。 点击这个按钮的时候,希望左侧的菜单栏取消选中,并折叠。 如图: 点击1 的时候 , 2 取消选中,父菜单折叠。 菜单.jpg 因为该操作都是在home页面中处理的,所以不涉及到跨页面数据传递的问题,如果有需要...
Vue Version:3.2.45 Element Plus Version:2.8.0 Browser / OS:Microsoft Edge 版本 128.0.2739.42 (正式版本) (64 位) Build Tool:Vite Reproduction Related Component el-menu Reproduction Link Element Plus Playground Steps to reproduce 平板:菜单折叠情况子菜单展开,点击子菜单某项,子菜单不会自动消失,会二...