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

水深无声 2024-04-17 17:58 34阅读 0赞

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

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

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=document.getElementsByTagName("aside");
                    elems[0].style.width="200px";
                    this.count++;
                  }
                },

跟着写的人就会发现一个问题：点击事件要点击两次后才有效果。这是因为生命周期的原因，所以，一定要在mounted中调用点击事件，这样点击一次就能实现了。![在这里插入图片描述][20190830113900204.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190829163329348.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/143776f79e814548bed3f63528614ad7.png
[20190830113900204.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ea7617cc4e014fc0b9969318966f75d7.png