vue3使用element elpus 组件库中的menu组件,collapse不折叠

我的情况是这样的,动态创建路由,项目参照尚硅谷的教学视频

menu自己封装的组件

按照官方文档使用的

但是效果是这样

就很难评,后面发现其实是需要将图标拿出来就好了,emmmm...,好了一半

遇到这种情况的话,直接将menu自己封装的这个组件里面的最外层的div删掉就ok了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 3 和 Element Plus 的组合中,要实现侧边栏折叠的效果,可以使用`el-menu`作为根节点,并结合`el-menu-item`和`el-submenu`来构建菜单栏。 首先,在模板中使用`el-menu`作为整个菜单的容器,并设置`collapse`属性来控制侧边栏的折叠状态。当`collapse`为`true`时,侧边栏折叠,文字会隐藏。当`collapse`为`false`时,侧边栏展开,文字会显示。 ```html <template> <el-menu :collapse="isCollapse"> <!-- 菜单项 --> <el-menu-item index="1">菜单项1</el-menu-item> <el-menu-item index="2">菜单项2</el-menu-item> <!-- 菜单 --> <el-submenu index="3"> <template #title> 菜单 </template> <el-menu-item index="3-1">菜单项1</el-menu-item> <el-menu-item index="3-2">菜单项2</el-menu-item> </el-submenu> </el-menu> </template> ``` 然后,在data中定义一个`isCollapse`变量来控制折叠状态的切换。通过点击按钮或其他交互方式,修改`isCollapse`的值来实现侧边栏的折叠和展开。 ```javascript <script> export default { data() { return { isCollapse: true, // 初始化折叠状态为true,侧边栏默认折叠 }; }, }; </script> ``` 需要注意的是,`el-menu`标签本身希望里面嵌套的是`el-menu-item`、`el-submenu`、`el-menu-item-group`其中之一。因此,我们要根据菜单的结构来合理使用这些标签。 通过上述方法,你可以实现在Vue 3 和 Element Plus 中的侧边栏折叠效果。根据`el-menu`的属性设置和交互操作来控制侧边栏的折叠和展开状态,从而实现文字的隐藏和显示效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值