Vue3DraggableResizable
[](https://www.npmjs.com/package/vue3-draggable-resizable)
[](LICENSE.md)
[](https://www.npmjs.com/package/vue3-draggable-resizable)
[](https://github.com/a7650/vue3-draggable-resizable)
> [Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。
## 文档目录
- [特性](#特性)
- [使用方法](#使用)
- [组件 Props](#props)
- [组件 Events](#events)
- [使用吸附对齐功能](#使用吸附对齐功能)
### 特性
- 支持拖拽和缩放，可分别定义开启或关闭
- 自定义缩放句柄（缩放时共有八个方位可操作，可分别定义开启或关闭）
- 限制组件的拖动和缩放在其父节点内
- 自定义组件内各种类名
- 缩放句柄的类名也可自定义
- 元素吸附对齐
- 实时参考线
- 自定义参考线
- 使用 Vue3 和 ts
### 使用
```bash
$ npm install vue3-draggable-resizable
```
使用 use 方法注册组件
```js
// >main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//需引入默认样式
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
// 你将会获得一个名为Vue3DraggableResizable的全局组件
createApp(App)
.use(Vue3DraggableResizable)
.mount('#app')
```
也可以单独在你的组件内部使用
```js
// >component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//需引入默认样式
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
components: { Vue3DraggableResizable }
// ...other
})
```
下面是一个使用 vue-template 语法写的例子
```vue
```
### Props
#### initW
type: `Number`
default: `null`
设置初始宽度（px）
```html
```
#### initH
type: `Number`
default: `null`
设置初始高度（px）
```html
```
#### w
type: `Number`
default: `0`
组件的当前宽度（px）
你可以使用“v-model:w”语法使它和父组件保持一致
```html
```
#### h
type: `Number`
default: `0`
组件的当前高度（px）
你可以使用“v-model:h”语法使它和父组件保持一致
```html
```
#### x
type: `Number`
default: `0`
组件距离父容器的左侧的距离（px）
你可以使用“v-model:x”语法使它和父组件保持一致
```html
```
#### y
type: `Number`
default: `0`
组件距离父容器顶部的距离（px）
你可以使用“v-model:y”语法使它和父组件保持一致
```html
```
#### minW
type: `Number`
default: `20`
组件的最小宽度（px）
```html
```
#### minH
type: `Number`
default: `20`
组件的最小高度（px）
```html
```
#### active
type: `Boolean`
default: `false`
组件当前是否处于活跃状态
你可以使用“v-model:active”语法使它和父组件保持一致
```html
```
#### draggable
type: `Boolean`
default: `true`
组件是否可拖动
```html
```
#### resizable
type: `Boolean`
default: `true`
组件是否可调整大小
```html
```
#### lockAspectRatio
type: `Boolean`
default: `false`
该属性用来设置是否锁定比例
```html
```
#### disabledX
type: `Boolean`
default: `false`
是否禁止组件在 X 轴上移动
```html
```
#### disabledY
type: `Boolean`
default: `false`
是否禁止组件在 Y 轴上移动
```html
```
#### disabledW
type: `Boolean`
default: `false`
是否禁止组件修改宽度
```html
```
#### disabledH
type: `Boolean`
default: `false`
是否禁止组件修改高度
```html
```
#### parent
type: `Boolean`
default: `false`
是否将组件的拖动和缩放限制在其父节点内，即组件不会超出父节点，默认关闭
```html
```
#### handles
type: `Array`
default: `['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']`
定义缩放的句柄（共八个方向）
- `tl` : 上左
- `tm` : 上中
- `tr` : 上右
- `mr` : 中左
- `ml` : 中右
- `bl` : 下左
- `bm` : 下中
- `br` : 下右
```html
```
#### classNameDraggable
type: `String`
default: `draggable`
自定义组件的类名，该类名在组件是“可拖动”时显示
```html
```
#### classNameResizable
type: `String`
default: `resizable`
自定义组件类名，该类名在组件是“可缩放”时显示
```html
```
#### classNameDragging
type: `String`
default: `dragging`
定义组件在拖动时显示的类名
```html
```
#### classNameResizing
type: `String`
default: `resizing`
定义组件在缩放时显示的类名
```html
```
#### classNameActive
type: `String`
default: `active`
定义组件在活跃状态下的类名
```html
```
#### classNameHandle
type: `String`
default: `handle`
定义缩放句柄的类名
```html
```
以上设置将会渲染出下面的缩放句柄节点（my-handle-\*）
```html
...
...
```
### parent-scale-x parent-scale-y
设置这俩个属性用于告诉拖动组件父级的缩放情况，以解决缩放后拖动鼠标位置偏移的问题
eg:
```html
...
...
```
### Events
#### activated
payload: `-`
组件从非活跃状态到活跃状态时触发
```html
```
#### deactivated
payload: `-`
组件从活跃状态到非活跃状态时触发
```html
```
#### drag-start
payload: `{ x: number, y: number }`
组件开始拖动时触发
```html
```
#### dragging
payload: `{ x: number, y: number }v`
组件在拖动过程中持续触发
```html
```
#### drag-end
payload: `{ x: number, y: number }`
组件拖动结束时触发
```html
```
#### resize-start
payload: `{ x: number, y: number, w: number, h: number }`
组件开始缩放时触发
```html
```
#### resizing
payload: `{ x: number, y: number, w: number, h: number }`
组件在缩放过程中持续触发
```html
```
#### resize-end
payload: `{ x: number, y: number, w: number, h: number }`
组件缩放结束时触发
```html
```
### 使用吸附对齐功能
吸附对齐功能可以在拖动过程中和其他元素自动吸附，你也可以自定义吸附对齐的校准线
你需要引入另外一个组件来使用该特性
像下面这样，将 Vue3DraggableResizable 放在 DraggableContainer 内：
```vue
```
### DraggableContainer Props
这些 props 适用于 DraggableContainer 组件
#### disabled
type: `Boolean`
default: `false`
关闭吸附对齐功能
```html
Test
Another test
```
#### adsorbParent
type: `Boolean`
default: `true`
是否和父组件对齐，如果开启，则元素拖拽到父容器边缘（父容器的上中下左中右边）时会发生吸附，否则不会
```html
Test
Another test
```
#### adsorbCols
type: `Array`
default: `null`
自定义列的校准线，元素在x轴上拖动到这些线附近时，会产生吸附
```html
Test
Another test
```
#### adsorbRows
type: `Array`
default: `null`
自定义行的校准线，元素在y轴上拖动到这些线附近时，会产生吸附
```html
Test
Another test
```
#### referenceLineVisible
type: `Boolean`
default: `true`
是否显示实时参考线，元素在产生自动吸附后，会有一条参考线线出现，如果不需要，可通过该选项关闭。
```html
Test
Another test
```
#### referenceLineColor
type: `String`
default: `#f00`
实时参考线的颜色，默认红色
```html
Test
Another test
```