Skip to content

Latest commit

 

History

History
167 lines (128 loc) · 4.97 KB

README.ZH.md

File metadata and controls

167 lines (128 loc) · 4.97 KB

vue3-resizable

vue3-resizable 是一个基于 Vue 3 的组件，提供了可调整大小和拖动功能，允许用户通过简单的拖动操作来自定义元素的尺寸和位置。并结合 any-touch 库有效地处理触摸事件，非常适合 PC 以及移动触摸设备。🚀

🐳 Vue 3 Composition API

🔥 用 TypeScript 编写

English · 简体中文 · Demo/文档

安装

使用 npm 安装：

npm install vue3-resizable

使用 pnpm 安装：

pnpm install vue3-resizable

或者使用 yarn：

yarn add vue3-resizable

使用方法

首先，确保在你的 Vue 项目中引入组件：

全局引用

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")

局部引用

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

然后，在你的组件中使用它：

<template>
  <LResize
    :minWidth="100"
    :minHeight="100"
    :maxWidth="300"
    :maxHeight="300"
    :initialWidth="150"
    :initialHeight="150"
    :initialTop="50"
    :initialLeft="50"
    :cssUnit="'px'"
    :showDimension="true"
    :showPosition="true"
  >
    <!-- 你可以在这里插入任何自定义内容 -->
    <div>可调整大小的内容容器</div>
  </LResize>
</template>

Props

Prop 类型 默认值 描述
minWidth number 30 最小宽度限制
minHeight number 30 最小高度限制
maxWidth number 无 最大宽度限制
maxHeight number 无 最大高度限制
initialWidth number 200 初始化宽度
initialHeight number 200 初始化高度
initialTop number 100 初始化上偏移
initialLeft number 100 初始化左偏移
cssUnit 'px' | 'rem' | string 'px' 宽高单位
showDimension boolean false 是否显示尺寸信息
showPosition boolean false 是否显示位置信息
style CSSProperties {} 容器样式
handleStyle CSSProperties {} 拖拽点样式

Slots

插槽名 说明
default 插入自定义内容

Events

事件名 说明 参数
boxUpdated 当盒子尺寸或位置更新时触发 BoxState

BoxState 参数

参数名 类型 说明
width number 盒子的宽度
height number 盒子的高度
top number 盒子的顶部位置
left number 盒子的左侧位置
zIndex number 盒子的 z-index 值

Exposes

方法名 说明 参数
updateBoxStyle 更新盒子样式 () => void
startDrag 开始拖拽 () => void
endDrag 拖拽结束 () => void
startResize 开始调整大小 () => void
endResize 调整大小结束 () => void

开发者指南

要参与此组件的开发，你可以克隆源代码仓库，并安装所有依赖：

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

贡献

欢迎通过发起 Issues 或提交 Pull Requests 来贡献你的代码。请确保你的代码符合项目的代码风格和质量标准。

许可证

此项目遵循 MIT 许可证发布。更多信息请查看 LICENSE 文件。