🐳 Vue 3 Composition API

🔥 Written in TypeScript

English · 简体中文 · Demo/Document

Installation

Install using npm:

npm install vue3-resizable

Install using pnpm:

pnpm install vue3-resizable

Or using yarn:

yarn add vue3-resizable

Usage

First, ensure that you import the component in your Vue project:

Global Import

import { createApp } from "vue"
import App from "./App.vue"

import LResize from "vue3-resizable"
import "vue3-resizable/dist/index.css"

const app = createApp(App)
app.use(LResize)
app.mount("#app")

Local Import

import { LResize } from "vue3-resizable"
import "vue3-resizable/dist/index.css"

Then, use it in your component:

<template>
  <LResize
    :minWidth="100"
    :minHeight="100"
    :maxWidth="300"
    :maxHeight="300"
    :initialWidth="150"
    :initialHeight="150"
    :initialTop="50"
    :initialLeft="50"
    :cssUnit="'px'"
    :showDimension="true"
    :showPosition="true"
  >
    <!-- You can insert any custom content here -->
    <div>Resizable content container</div>
  </LResize>
</template>

Props

| Prop | 类型 | 默认值 | 描述 | | --------------- | ------------------------- | ------- | -------------------- | | minWidth | number | 30 | Minimum width limit | | minHeight | number | 30 | Minimum height limit | | maxWidth | number | none | Maximum width limit | | maxHeight | number | none | Maximum height limit | | initialWidth | number | 200 | Initial width | | initialHeight | number | 200 | Initial height | | initialTop | number | 100 | Initial top offset | | initialLeft | number | 100 | Initial left offset | | cssUnit | 'px' \| 'rem' \| string | 'px' | Size unit | | showDimension | boolean | false | Show size info | | showPosition | boolean | false | Show position info | | style | CSSProperties | {} | Container style | | handleStyle | CSSProperties | {} | Drag handle style |

Slots

| Slot Name | Description | | --------- | --------------------- | | default | Insert custom content |

Events

| Event Name | Description | Parameters | | ---------- | -------------------------------------------------- | ---------- | | boxUpdated | Triggered when the box size or position is updated | BoxState |

BoxState Parameters

| Parameter Name | Type | Description | | -------------- | -------- | ------------------------ | | width | number | Width of the box | | height | number | Height of the box | | top | number | Top position of the box | | left | number | Left position of the box | | zIndex | number | z-index value of the box |

Exposes

| Method Name | Description | Parameters | | -------------- | ---------------- | ------------ | | updateBoxStyle | Update box style | () => void | | startDrag | Start dragging | () => void | | endDrag | End dragging | () => void | | startResize | Start resizing | () => void | | endResize | End resizing | () => void |

Developer Guide

To contribute to the development of this component, you can clone the source code repository and install all dependencies:

git clone https://github.com/LostElkByte/vue3-resizable.git
cd vue3-resizable
npm install

Contribution

Contributions are welcome through Issues or Pull Requests. Please ensure your code follows the project's style and quality standards.

License

This project is licensed under the MIT License. For more information, please see the LICENSE file.