vue3-resizable v1.0.0-alpha.3

🐳 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

Slots

Events

BoxState Parameters

Exposes

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.