vue展开收起功能

html:

js块：

classObj() {
      return {
        hideSidebar: !this.opened,
        openSidebar: this.opened,
      };
      
      // 展开收起
    changeOpen() {
      this.opened = !this.opened;
      window.addEventListener("resize", () => {
        if (this.drawLine) {
          this.drawLine.resize();
        }
      });
    },

css块
.hideSidebar {
.leftr {
width: 0;
border: none;
}
.rightr {
margin-left: 0;
}

.openSidebar {
.leftr {
border: 0.7px solid #e6e6e6;
}
}
.leftr {
width: 150px;//这个是重点
border: 1px solid #e6e6e6;
padding-left: 20px;
margin-top: 10px;
float: left;
min-height: 500px;
background: #e6f0f8;
border-radius: 4px;
position: absolute;//这个是重点
left: 0;//这个是重点
top: -8px;//这个是重点
transition: width 0.28s;//这个是重点
overflow: hidden;//这个是重点
}

.rightr {
position: relative;//这个是重点
height: 80%;//这个是重点
margin-left: 169px;//这个是重点
transition: margin-left 0.28s;//这个是重点
}

页面效果：