el-submenu嵌套使用时隐藏后submenu闪动再消失

最新推荐文章于 2024-11-11 00:06:09 发布

原创最新推荐文章于 2024-11-11 00:06:09 发布 · 943 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

5 篇文章

订阅专栏

在Vue中使用Element UI的el-submenu组件时，如果多个子菜单嵌套并设置了相同的hide-timeout属性，可能导致子菜单在关闭时出现闪烁现象。为避免此问题，应当确保父级submenu的hide-timeout值大于子级submenu的hide-timeout值，以确保子菜单完全关闭后父级菜单才会隐藏。

多个el-submenu嵌套使用时，:hide-timeout属性不能设置相等的值，不然内部的el-submenu未消失之前外部的就消失了，会出现内部el-submenu闪动的情况

<el-submenu index="hqg" class="menu-item" popper-class="menu-item2" :show-timeout="100" :hide-timeout="200">    <!--父目录的hide-timeout要大于子目录的hide-timeout-->
   <template slot="title"><span>一级目录</span></template>
   <el-submenu
       index="hqzx"
       :show-timeout="100"
       :hide-timeout="100"  
   > <!--子目录的hide-timeout要小于父目录的hide-timeout-->
       <template slot="title">二级目录</template>
       <el-menu-item index="bg">三级目录</el-menu-item>
       <el-menu-item index="xt">三级目录</el-menu-item>
   </el-submenu>
</el-submenu>