Skip to content

Latest commit

 

History

History
170 lines (130 loc) · 5.4 KB

README.md

File metadata and controls

170 lines (130 loc) · 5.4 KB

vue3-resizable

vue3-resizable is a component based on Vue 3 that provides resizing and dragging features, allowing users to customize the size and position of elements through simple drag operations. It effectively handles touch events in combination with the any-touch library, making it suitable for both PC and mobile touch devices. 🚀

🐳 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.