vue

您所在的位置:网站首页 如何将折叠的表格展开在菜单栏 vue

vue

2023-12-29 14:40| 来源: 网络整理| 查看: 265

老规矩,先上图看下是不是跟你的问题一样

在这里插入图片描述 这就是我的菜单遇到的问题,用的elementul的菜单来做的,但是我这个折叠动画会在最后卡一秒,然后在完全折叠,展开倒是正常的,就是折叠一直有延迟一秒文字消失。让我很头疼。网上看了很多办法,最后我找到了一个很实用的办法。

思路

一开始我是看了网上说让我给:collapse-transition属性改成true。然后一定要记得加样式才行,如下:

.el-menu-vertical-demo:not(.el-menu--collapse){ width: 250px; //宽度自己掌握 height: 100%; }

但是我加了后不生效!!我试过了放在本组件!也试过放总的scss文件!也试过deep穿透就是不生效??? 然后我就又找了一圈发现,既然我这个折叠的时候会把我菜单的el-aside部分宽度改变来达到折叠效果,那我何必要在菜单上下手,可以直接让菜单就:collapse-transition为false,禁用动画,然后我直接给el-aside加动画效果不就可以了。这样el-aside改变宽度折叠起来的时候有了动画不就是一样的效果了吗。

上代码 第一步:把你的el-menu组件加上属性 :collapse-transition=“false” ha 我的后台系统 第二步:到你的main.vue或者是layout.vue组件,也就是主出口组件内加样式 html部分---- //给你的el-aside组件加上这个动画效果,然后你在点击试试就有效果了。 css部分---- .el-aside { transition: width 0.15s; -webkit-transition: width 0.15s; -moz-transition: width 0.15s; -webkit-transition: width 0.15s; -o-transition: width 0.15s; }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3