Divider - Vue3 拖拽分割组件

一个极简灵活的可拖拽分割组件，用于调整容器的尺寸（开箱即用）

• 支持对容器进行水平或垂直分割
• 支持限定容器最小宽高
• 支持样式的自定义

演示

快速开始

npm i divider-vue3

<template>
  <div class="container">
    <div class="left">左侧</div>
    <Divider direction="x"/>
    <div class="right">右侧</div>
  </div>
</template>

<script setup lang="ts">
import { Divider } from 'divider-vue3'
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  padding: 1rem;
  background-color: rgb(220, 220, 220);
}

.left {
  background-color: white;
  flex: 1;
}

.right {
  background-color: white;
  flex: 1;
}
</style>

完整用法

<template>
  <div class="container">
    <div class="left">左侧</div>
    <Divider direction="x" :minSize="10" :style="dividerStyle" @resizeEnd="handleResizeEnd" />
    <div class="right">
      <div class="top">上侧</div>
      <Divider direction="y" :minSize="10" :style="dividerStyle" @resizeEnd="handleResizeEnd" />
      <div class="bottom">下侧</div>
    </div>
  </div>
</template>

<script setup>
import Divider from './components/Dvider.vue'

// 自定义样式配置
const dividerStyle = {
  color: 'rgb(170,173,180)',
  highlightColor: '#60a5fa',
  containerWidth: 0.625,
  lineWidth: 0.125,
  hoverLineWidth: 0.2
}

const handleResizeEnd = (event) => {
  console.log('Resize event:', event)
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  padding: 1rem;
  background-color: rgb(220, 220, 220);
}

.left {
  background-color: white;
  flex: 1;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;

  .top {
    flex: 1;
    background-color: white;
  }

  .bottom {
    flex: 1;
    background-color: white;
  }
}
</style>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | direction | 'x' \| 'y' | 'x' | 分割方向（x 水平，y 垂直） | | minSize | number | 10 | 最小尺寸（rem） | | style | object | {} | 样式配置 |

样式配置

{
  color: '#9ca3af',           // 分割线颜色
  highlightColor: '#4ade80',  // 悬浮时颜色
  containerWidth: 0.625,      // 容器宽度 (rem)
  lineWidth: 0.125,           // 分割线宽度 (rem)
  hoverLineWidth: 0.2         // 悬浮时宽度 (rem)
}

事件

| 事件 | 说明 | |------|------| | resizeEnd | 拖拽结束时触发 |

许可证

MIT