vue3-draggable-resizable中文文档

Vue3-draggable-resizable 是一个基于 Vue3 的拖拽缩放组件库，可以用于实现可拖拽、可缩放的布局。以下是该组件库的中文文档：

## 安装

使用 npm 安装：

npm install vue3-draggable-resizable

使用 yarn 安装：

yarn add vue3-draggable-resizable

## 引入

在 Vue3 项目中引入：

import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

export default {
  components: {
    Vue3DraggableResizable
  }
}

## 使用

使用 `Vue3DraggableResizable` 组件包裹需要拖拽缩放的元素即可：

<template>
  <Vue3DraggableResizable :w="200" :h="200">
    <div>Hello World!</div>
  </Vue3DraggableResizable>
</template>

## Props

以下是 `Vue3DraggableResizable` 组件的 props：

| Prop | 类型 | 默认值 | 描述 |
| ---------- | ------- | ------ | ---------------------------------------------------------------------------------------------------------------------------- |
| w | Number | 200 | 元素的宽度 |
| h | Number | 200 | 元素的高度 |
| x | Number | 0 | 元素的 x 坐标 |
| y | Number | 0 | 元素的 y 坐标 |
| z | Number | 1 | 元素的 z 坐标，用于控制元素的层级 |
| isDraggable | Boolean | true | 是否可拖拽 |
| isResizable | Boolean | true | 是否可缩放 |
| minWidth | Number | 0 | 元素的最小宽度 |
| minHeight | Number | 0 | 元素的最小高度 |
| maxWidth | Number | 无限制 | 元素的最大宽度，设置为 0 表示没有限制 |
| maxHeight | Number | 无限制 | 元素的最大高度，设置为 0 表示没有限制 |
| grid | Array | 无限制 | 缩放时的网格，设置为 `[10, 10]` 表示每次缩放增加或减少 10 个像素，设置为 `[20, 20]` 表示每次缩放增加或减少 20 个像素 |

## 事件

以下是 `Vue3DraggableResizable` 组件的事件：

| 事件名 | 回调参数 | 描述 |
| ---------------- | ---------------------- | --------------------------------- |
| onDragStarted | `{ x: number, y: number }` | 拖拽开始时触发 |
| onDragged | `{ x: number, y: number }` | 拖拽过程中触发 |
| onDragStopped | `{ x: number, y: number }` | 拖拽结束时触发 |
| onResizedStarted | `{ w: number, h: number }` | 缩放开始时触发 |
| onResized | `{ w: number, h: number }` | 缩放过程中触发 |
| onResizedStopped | `{ w: number, h: number }` | 缩放结束时触发 |
| onClicked | `{ x: number, y: number }` | 点击元素时触发，注意不是双击事件 |

## 插槽

以下是 `Vue3DraggableResizable` 组件的插槽：

| 插槽名 | 描述 |
| ------ | ---------------------- |
| default | 组件包裹的元素 |

## 示例

以下是一个简单的示例：

<template>
  <Vue3DraggableResizable
    :w="200"
    :h="200"
    :isResizable="false"
    @onClicked="handleClick"
  >
    <div class="box">Hello World!</div>
  </Vue3DraggableResizable>
</template>

<script>
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

export default {
  components: {
    Vue3DraggableResizable
  },
  methods: {
    handleClick(pos) {
      console.log(`Clicked at (${pos.x}, ${pos.y})`)
    }
  }
}
</script>

<style>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f00;
  color: #fff;
  font-size: 16px;
}
</style>

## 结语

以上就是 Vue3-draggable-resizable 的中文文档，更多详细内容请参考官方文档。