可拖动大小页面

最新推荐文章于 2024-05-19 10:06:42 发布

如此~如此~

最新推荐文章于 2024-05-19 10:06:42 发布

阅读量193

点赞数

分类专栏：前端文章标签： js javascript less vue.js

本文链接：https://blog.csdn.net/qq_52438072/article/details/119385513

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

上效果

在这里插入图片描述

上代码

<template>
  <div class="box">
    <div class="left">盒子1</div>
    <div class="resize"></div>
    <div class="mid">盒子2</div>
    <div class="resize2"></div>
    <div class="right">盒子3</div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.dragControllerDiv()
  },
  methods: {
    dragControllerDiv: function () {
      var resize = document.getElementsByClassName('resize')[0]
      var resize2 = document.getElementsByClassName('resize2')[0]
      var left = document.getElementsByClassName('left')[0]
      var right = document.getElementsByClassName('right')[0]
      var mid = document.getElementsByClassName('mid')[0]
      var box = document.getElementsByClassName('box')[0]
      resize.onmousedown = function (e) {
        var startX = e.clientX
        resize.left = resize.offsetLeft
        document.onmousemove = function (e) {
          var endX = e.clientX
          var rightW = right.offsetWidth
          var moveLen = resize.left + (endX - startX)
          var maxT = box.clientWidth - resize.offsetWidth
          if (moveLen < 150) moveLen = 150
          if (moveLen > maxT - rightW - 155) moveLen = maxT - rightW - 155
          resize.style.left = moveLen
          left.style.width = moveLen + 'px'
          mid.style.width = (box.clientWidth - moveLen - rightW - 10) + 'px'
        }

        document.onmouseup = function (evt) {
          document.onmousemove = null
          document.onmouseup = null
          resize.releaseCapture && resize.releaseCapture()
        }
        resize.setCapture && resize.setCapture()
        return false
      }
      resize2.onmousedown = function (e) {
        var startX = e.clientX
        resize2.left = resize2.offsetLeft
        document.onmousemove = function (e) {
          var endX = e.clientX
          var leftW = left.offsetWidth
          var moveLen = resize2.left + (endX - startX) - leftW
          var maxT = box.clientWidth - resize2.offsetWidth - 5
          if (moveLen < 150) moveLen = 150
          if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150
          resize2.style.left = moveLen
          mid.style.width = moveLen - 5 + 'px'
          right.style.width = (box.clientWidth - moveLen - leftW - 10) + 'px'
        }
        document.onmouseup = function (evt) {
          document.onmousemove = null
          document.onmouseup = null
          resize2.releaseCapture && resize2.releaseCapture()
        }
        resize2.setCapture && resize2.setCapture()
        return false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .left {
    float: left;
    width: 33%;
    height: 100%;
    background: skyblue;
  }
  .mid {
    float: left;
    width: calc(~"34% - 10px");
    height: 100%;
    background: gray;
  }
  .right {
    float: left;
    width: 33%;
    height: 100%;
    background: skyblue;
  }
  .resize,
  .resize2 {
    width: 5px;
    height: 100%;
    cursor: w-resize;
    float: left;
  }
}
</style>