效果如图：动画.gif

思路

在flex容器(container)中横向排布侧边栏(aside)、分隔线(divider)和主要区域(main)
通过useMousePressed获取分隔线上的鼠标按压状态，通过useMouseInElement获取容器内的鼠标移动状态，这些状态是响应式的
侦听鼠标横向移动距离，仅当鼠标在分隔线按下（即拖拽）时，同步修改侧边栏宽度

代码

shallowRef、watch等已通过unplugin-auto-import自动导入

<template>
  <div ref="containerRef" class="container">
    <div ref="asideRef" class="aside">Aside</div>
    <div ref="dividerRef" class="divider"></div>
    <div class="main">Main</div>
  </div>
</template>

<script setup lang="ts">
import { useMousePressed, useMouseInElement } from '@vueuse/core'

const asideRef = shallowRef()
const dividerRef = shallowRef()
const containerRef = shallowRef()

const { pressed } = useMousePressed({ target: dividerRef, touch: false })
const { elementX } = useMouseInElement(containerRef)

watch(elementX, (newVal) => {
  if (!pressed.value) return
  asideRef.value.style.flexBasis = `${Math.floor(newVal)}px`
})
</script>

<style scoped lang="scss">
.container {
  height: 200px;
  display: flex;
}

.aside {
  flex-basis: 120px;
  background-color: skyblue;
}

.divider {
  flex: 0 0 4px;
  height: 100%;
  background-color: red;
  cursor: col-resize;

  &:active {
    cursor: default;
  }
}

.main {
  flex: 1;
  background-color: orange;
}
</style>

Vue3+VueUse 极简实现可拖拽侧边栏

思路

代码