Vue中折叠卡顿问题

vue开发中,侧边栏的导航折叠效果用到collapse属性。

默认情况下collapse处于false 关闭状态。可以给按钮绑定点击事件,控制折叠效果。

但发现,开启折叠效果之后,会存在点击之后,文字折叠卡顿情况,找了一圈问题,最终发现,element-ui 中 默认情况下折叠是自带动画效果的。

当关闭折叠动画效果后,流畅度恢复!

注意:在加上属性时,为了保证结果是布尔值,一定要动态绑定,否则可能是数值作为结果。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue多级折叠面板是一种在Vue框架下实现的可展开和折叠的面板组件。它可以通过点击父级元素来展开或折叠直属子级元素。在多级折叠面板,还具备以下功能: 1. 点击父级元素的勾选图标可以选择或取消该层级下的所有子项。 2. 当所有子项都被选时,父级元素的勾选图标会自动勾选。反之,如果没有全部选,则父级元素的勾选图标会自动取消勾选。 3. 不同层级之间的勾选状态互不影响,即子项的勾选状态不会影响其它层级的勾选状态。 以上是Vue多级折叠面板的基本功能描述。通过使用相关的Vue组件和事件绑定,可以实现这些功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue 折叠面板](https://blog.csdn.net/z93701081/article/details/129661557)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue多级复杂列表展开/折叠,全选/分组全选实现](https://blog.csdn.net/HashTang/article/details/103433312)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值