drag-resize

📖介绍

一个简单的拖拽调整尺寸指令，支持水平和垂直方向调整尺寸。

🌈预览

🎨安装

npm install drag-resize-directive

✨使用

// main.js
import { createApp } from 'vue'

import App from './App.vue'
import dragResize from 'drag-resize-directive'
import 'drag-resize-directive/dist/drag-resize.css'

const app = createApp(App)
app.use(dragResize)

app.mount('#app')

<template>
  <div class="panel-view">
    <div
      class="left-panel"
      v-drag-resize="{
        mainContainer: '.panel-view',
        direction: 'right',
        minWidth: 100,
        maxWidth: 500,
      }"
    >
      <h2>Left</h2>
    </div>
    <div class="right-panel">
      <div class="top-panel">
        <h2>Right Top</h2>
      </div>
      <div
        class="bottom-panel"
        v-drag-resize="{
          mainContainer: '.panel-view .right-panel',
          direction: 'top',
          minHeight: 100,
          maxHeight: 300,
        }"
      >
        <h2>Right Bottom</h2>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
  .panel-view {
    margin: 0 auto;
    width: 1000px;
    height: 500px;
    display: flex;
    flex-direction: row;
    border: 1px solid #999;

    .left-panel {
      width: 300px;
      border-right: 1px solid #999;
    }

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

      .top-panel {
        flex: 1;
        border-bottom: 1px solid #999;
      }

      .bottom-panel {
        height: 250px;
      }
    }

    .left-panel,
    .top-panel,
    .bottom-panel {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

💡参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------- | --------------------------------------- | ---- | ---------- | ------------------------------------------------------ | | mainContainer | string | 是 | body | 父容器选择器，默认为body | | positionMode | string | 否 | fixed | 定位方式，可选值：absolute、fixed，默认为fixed | | direction | string | 是 | left | 拖拽方向，可选值：left、right、top、bottom，默认为left | | minWidth | number | 否 | 0 | 最小宽度，默认为0 | | maxWidth | number | 否 | 父容器宽度 | 最大宽度，默认为父容器宽度 | | minHeight | number | 否 | 0 | 最小高度，默认为0 | | maxHeight | number | 否 | 父容器高度 | 最大高度，默认为父容器高度 | | disabled | boolean | 否 | false | 是否禁用拖拽，默认为false | | delay | number | 否 | 0 | 延迟更新时间，默认为0 | | size | number | 否 | 6 | 拖拽区域大小，默认为6 | | callback | (width: number, height: number) => void | 否 | - | 拖拽回调函数 |

{
  mainContainer: string, // 父容器选择器，默认为body
  positionMode?: string, // 定位方式，可选值：absolute、fixed，默认为fixed
  direction: string, // 拖拽方向，可选值：left、right、top、bottom，默认为left
  minWidth?: number, // 最小宽度，默认为0
  maxWidth?: number, // 最大宽度，默认为父容器宽度
  minHeight?: number, // 最小高度，默认为0
  maxHeight?: number, // 最大高度，默认为父容器高度
  disabled?: boolean, // 是否禁用拖拽，默认为false
  delay?: number, // 延迟更新时间，默认为0
  size?: number, // 拖拽区域大小，默认为6
  callback?: (width: number, height: number) => void, // 拖拽回调函数
}