页面左右两部分可拉伸实现

最新推荐文章于 2024-06-26 09:45:42 发布

WR3nch

最新推荐文章于 2024-06-26 09:45:42 发布

阅读量342

点赞数 4

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/WR3nch/article/details/135861921

版权

新项目需求：左侧为视频播放区域，右侧为设备列表树，要求右侧列表可以拉伸显示完整设备名称

html部分代码

<div class="container" id="container">
    <!-- 左侧区域 -->
    <div class="left" ref="childVideo" id="left-container">
      <div class="demoVideo" id="videoWindowContainer"></div>
    </div>
    <!-- 中间可点击拉伸侧区域 可设置宽度和其他样式 -->
    <div class="linebar" id="linebar" @mousedown="gragEagle"></div>
    <!-- 右侧区域 -->
    <div class="right" id="right-container">
        <el-tree ref="tree" :data="treeData" node-key="id"></el-tree>
    </div>
 </div>

//中间可拉伸样式
.linebar {
  background: transparent;
  width: 12px;
  height: 100%;
  cursor: w-resize;
}

页面布局如图

js操作代码利用监听鼠标事件和获取dom的窗口x轴距离

//初始化元素
    initEle() {
      //获取中间可点击拉伸的部分
      linebar = document.getElementById("linebar");
      linebarWidth = linebar.offsetWidth;
      //右侧列表树dom
      rightContainerEle = document.getElementById("right-container");
      rightContainerWidthDef = rightContainerEle.offsetWidth;
      //左侧视频播放dom
      leftContainerEle = document.getElementById("left-container");
      lefttContainerWidthDef = leftContainerEle.offsetWidth;
    },
    //拖拽右侧
    gragEagle(e) {
      let startX = e.clientX;
      rightContainerWidth = rightContainerEle.offsetWidth;
      document.onmousemove = function (e) {
        e.preventDefault();
        let distX = Math.abs(e.clientX - startX); //得到鼠标拖动的宽，取绝对值
        //往右拖动，右侧宽度=右侧宽度-拖动宽度
        if (e.clientX > startX) {
          rightContainerEle.style.width = rightContainerWidth - distX + "px";
          //36是三个间距总和
          leftContainerEle.style.width =
            containerWidthDef - rightContainerWidth + distX - 36 + "px";
        }
        //往左拖动，右侧宽度=右侧宽度+拖动宽度
        if (e.clientX < startX) {
          rightContainerEle.style.width = rightContainerWidth + distX + "px";
          leftContainerEle.style.width =
            containerWidthDef - rightContainerWidth - distX - 36 + "px";
        }

        //设置最大值最小值：不能无限制缩放，影响体验
        if (parseInt(rightContainerEle.style.width, 10) > 950) {
          rightContainerEle.style.width = "950px";
          leftContainerEle.style.width =
            containerWidthDef -
            parseInt(rightContainerEle.style.width, 10) - 36 + "px";
        }
        if (
          parseInt(rightContainerEle.style.width, 10) < rightContainerWidthDef
        ) {
          rightContainerEle.style.width = rightContainerWidthDef + "px";
          leftContainerEle.style.width =
            containerWidthDef -
            parseInt(rightContainerEle.style.width, 10) - 36 + "px";
        }
      };
    },