vue3 可拖拽页面，可缩放布局

效果图

55

vue3 完整代码

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

// 入参

// 生命周期
onMounted(() => {})

//左边盒子最小距离
const leftSmall = ref<boolean>(false)
//右边盒子边最小距离
const rightSmall = ref<boolean>(false)

//是否按下
const dragFlag = ref<boolean>(false)

//左边移动距离
const moveLenLeft = ref<number>(0)
//右边移动距离
const moveLenRight = ref<number>(0)

/*
 * 拖拽事件
 */
// 初始距离
// 是否按下
const dragstart = () => {
  dragFlag.value = true
}

//左边拖拽
const dragLeft = (e: any) => {
  if (!dragFlag.value) {
    return
  }
  if (e.clientX && e.clientX - 16 <= 300) {
    moveLenLeft.value = 300
  } else if (e.clientX && e.clientX - 16 >= 400) {
    moveLenLeft.value = 400
  } else {
    moveLenLeft.value = e.clientX - 16
  }
}
//获取页面宽度
const screenRef = ref<any>()

//右边拖拽
const dragRight = (e: any) => {
  const screenWidth = JSON.parse(JSON.stringify(screenRef.value.offsetWidth || 0))
  if (!dragFlag.value || !e.clientX) {
    return
  }
  if (screenWidth - e.clientX && screenWidth - e.clientX + 16 <= 300) {
    moveLenRight.value = 300
  } else if (screenWidth - e.clientX && screenWidth - e.clientX + 16 >= 400) {
    moveLenRight.value = 400
  } else {
    moveLenRight.value = screenWidth - e.clientX + 16
  }
}
const dragend = () => {
  dragFlag.value = false
}
</script>
<template>
  <div class="container" ref="screenRef">
    <div class="content">
      <div
        class="left"
        :class="{ small: leftSmall }"
        :style="{ width: moveLenLeft ? moveLenLeft + 'px' : '' }"
      ></div>
      <!--拖动div-->
      <div class="search-drag-box">
        <div
          class="dragImg"
          :draggable="true"
          title="可左右拖动"
          @dragstart="dragstart()"
          @dragend="dragend()"
          @drag="dragLeft($event)"
        >
          <div class="left" @click="leftSmall = !leftSmall">
            <img src="@/assets/images/zsq.png" alt="" v-if="!leftSmall" />
            <img src="@/assets/images/ysq.png" alt="" v-else-if="leftSmall" />
          </div>
          <img src="@/assets/images/td.png" alt="" />
        </div>
      </div>
      <div class="center"></div>
      <!--拖动div-->
      <div class="search-drag-box">
        <div
          class="dragImg"
          :draggable="true"
          title="可左右拖动"
          @dragstart="dragstart()"
          @dragend="dragend()"
          @drag="dragRight($event)"
        >
          <div class="right" @click="rightSmall = !rightSmall">
            <img src="@/assets/images/ysq.png" alt="" v-if="!rightSmall" />
            <img src="@/assets/images/zsq.png" alt="" v-else-if="rightSmall" />
          </div>
          <img src="@/assets/images/td.png" alt="" />
        </div>
      </div>
      <div
        class="right"
        :class="{ small: rightSmall }"
        :style="{ width: moveLenRight ? moveLenRight + 'px' : '' }"
      ></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  .content {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;

    .left {
      width: 350px;
      height: 100%;
      border: 2px solid red;
    }
    .center {
      flex: 1;
      flex-shrink: 0;
      border: 2px solid green;
    }
    .right {
      width: 350px;
      height: 100%;
      border: 2px solid pink;
    }
  }
}
.small {
  width: 16px !important;
}
.search-drag-box {
  margin: 0 1px;
  flex-shrink: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  .dragImg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .left {
      position: absolute;
      top: -12px;
      left: -12px;
      cursor: pointer;
      border: 0;
    }
    .right {
      position: absolute;
      top: -12px;
      left: 12px;
      cursor: pointer;
      border: 0;
    }
  }
}
</style>

视频中的图片文件