需求：1.左侧是个树形结构，有的文字过长展示不全，想通过拖拽显示全部的数据
           2.展开收起

实现图中效果

<div class="catalog-drag"><svg t="1687228434888" class="icon" viewBox="0 0 1024 1024" version="1.1"                         xmlns="http://www.w3.org/2000/svg" p-id="1527" width="16" height="30"><path d="M446.464 146.944v727.552c0 15.872-14.336 27.648-31.744 27.648-17.92 0-31.744-12.288-31.744-27.648V146.944c0-15.872 14.336-27.648 31.744-27.648 17.408-0.512 31.744 11.776 31.744 27.648zM644.608 146.944v727.552c0 15.872-14.336 27.648-31.744 27.648-17.92 0-31.744-12.288-31.744-27.648V146.944c0-15.872 14.336-27.648 31.744-27.648 17.408-0.512 31.744 11.776 31.744 27.648zM84.48 525.312c-8.192-7.68-8.192-22.528 0-30.208L180.224 409.6l88.064-78.848c10.24-9.216 24.576 0 24.576 14.848v328.704c0 15.36-14.336 24.576-24.576 14.848l-88.064-78.848-95.744-84.992zM942.592 525.312c8.192-7.168 8.192-22.016 0-29.696l-95.744-84.992L758.784 332.8c-10.24-9.216-24.576 0-24.576 14.848v325.632c0 15.36 14.336 24.064 24.576 14.848l88.064-77.824 95.744-84.992z" fill="#707070" p-id="1528"></path> </svg>
</div>   //左侧侧边栏拖拽事件handleLeft() {console.log("左侧侧边栏拖拽事件");var leftBar = document.getElementsByClassName("catalog-drag")[0];var leftTree = document.getElementsByClassName("product-catalog-tree")[0];// 鼠标按下事件leftBar.onmousedown = function () {// 颜色提醒leftBar.style.backgroundColor = "#99B8FC";// 鼠标拖动事件document.onmousemove = function (eventMove) {let width = eventMove.clientX + 20;console.log("width =>", width);if (width >= 600) {width = 600; // 设置最大拉伸宽度为600} else if (width <= 200) {// 当拉伸宽度为小于或等于200，最小拉伸宽度为200width = 294;}leftBar.style.width = width + "px";};// 鼠标松开事件document.onmouseup = function () {// 颜色恢复leftBar.style.backgroundColor = "#fafcff";document.onmousemove = null;document.onmouseup = null;leftBar .releaseCapture && leftResizeBar.releaseCapture();};leftBar.setCapture && leftBar.setCapture();return false;};},
.catalog-drag {position: absolute;width: 4px;top: 0;right: 0;height: 100%;cursor: col-resize;padding-top: calc(45vh - 10px);user-select: none;transition: all ease 0.3s;
}.catalog-drag:hover {background-color: #99b8fc !important;
}.catalog-drag svg {position: absolute;left: 1;
}

在mounted里面调用就可以了

实现左侧展开收起

    <div @click="handleShowLeft"><img v-if="!isShowLeft" src="../../new_/imgs/icon-fold.svg" style="width:14px" /><img v-else src="../../new_/imgs/icon-upfold.svg" style="width: 14px" /></div>    // 左侧展开收起handleShowLeft() {this.isShowLeft= !this.isShowLeft;var leftTree = document.getElementsByClassName("product-catalog-tree")[0];if (this.isShowLeft) {leftTree .style.width = "26px";} else {leftTree.style.width = "294px";setTimeout(() => {//展开后还能继续拖拽this.handleLeft();}, 100);}},