vue实现左侧拖拽拉伸，展开收起

小秋菇娘

于 2024-05-30 14:43:45 发布

阅读量354

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaojiaoaozhangyi/article/details/139316752

版权

需求：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，最小拉伸宽度为200
            width = 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);
      }
    },