【交互篇】vue3如何实现鼠标拖动改变布局宽度？

背景

    最近接到个需要鼠标拖动改变页面布局宽度的需求，实现方式很简单，本文主要是记录一下实现过程，有相似需求的小伙伴可以参考一下~

实现效果

相关API

• 鼠标事件拖动元素流程

• mousedown mousedown 事件在定点设备（如鼠标或触摸板）按钮在元素内按下时，会在该元素上触发。
• mousemove mousemove 事件在定点设备（通常指鼠标）的光标在元素内移动时，会在该元素上触发。
• mouseup mousedown 事件在定点设备（如鼠标或触摸板）按钮在元素内释放时，在该元素上触发。mouseup 事件与 mousedown 事件相对应。

具体实现

<template>
  <div class="play-container">
    <el-container>
      <el-aside :width="`${lastX}px`">Aside宽 {{ lastX }}
       <slot></slot>
      </el-aside>
      <!-- 给可拖动元素添加鼠标按下事件 -->
      <div class="resize" @mousedown="mouseDown"></div>
      <el-main>Main <slot></slot> </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue'
  import { throttle } from 'lodash-es'
/**拖动改变宽度实现 */
// 拖动改变元素宽度
const lastX = ref(200)
// 鼠标移动事件，将鼠标指针相对于屏幕的 X 轴坐标赋值给需要动态变化的元素宽度
const mouseMove = (event: any) => {
  lastX.value = event.screenX
}
// 鼠标按下事件
const mouseDown = (event: any) => {
  document.addEventListener('mousemove', mouseMove)
  lastX.value = event.screenX
}
// 鼠标释放事件
const mouseUp = () => {
  // 指定元素可改变的最大以及最小宽度
  const moveX = lastX.value > 500 ? 500 : lastX.value < 200 ? 200 : lastX.value
  lastX.value = moveX
  document.removeEventListener('mousemove', mouseMove)
}
// 鼠标释放节流事件
const handleMoveThrottled = throttle(mouseUp, 300)
// onMounted时添加鼠标移动事件监听器
onMounted(() => {
  document.addEventListener('mouseup', handleMoveThrottled)
})
// 组件卸载时移除监听
onUnmounted(() => {
  document.removeEventListener('mouseup', handleMoveThrottled)
})
</script>

总结

    本文主要利用鼠标事件mousedown、mousemove、mouseup来实现拖动动态改变元素宽度的效果，除了鼠标事件，其实也可以利用拖拽事件来实现，可以根据自己的实际需求选择对应的方案实现~