vue实现推拉门折叠侧边栏分类树效果

最新推荐文章于 2024-07-08 17:31:14 发布

指标满载

最新推荐文章于 2024-07-08 17:31:14 发布

阅读量1.9k

点赞数

文章标签：推拉门

本文链接：https://blog.csdn.net/weixin_44770377/article/details/100141053

版权

本文介绍如何使用Vue实现推拉门效果的折叠侧边栏分类树。关键在于利用点击事件改变DOM元素的宽度，实现展开与收起，并更新对应图标。注意，为避免点击两次才生效的问题，需确保点击事件在组件挂载后(mounted)调用。

摘要由CSDN通过智能技术生成

vue实现推拉门折叠侧边分类树效果

其实不难，主要是事件，通过点击事件查找到dom元素，对侧边宽度设置为0即隐藏；宽度为值即显示，同事时修改对应的图片。通过计数来实现反复点击在这里插入图片描述

tabTreeShow:function(){
              if(this.count%2==1){
                var elem=document.getElementById("button");
                elem.firstElementChild.setAttribute("class","el-icon-s-unfold");
                var elems=document.getElementsByTagName("aside");
                elems[0].style.width="0";
                this.count++;
              }else{
                var elem=document.getElementById("button");
                elem.firstElementChild.setAttribute("class","el-icon-s-fold");
                var elems&