Vue3DraggableResizable 拖拽插件的官方文档
一、Vue3DraggableResizable 的属性和事件
1、Vue3DraggableResizable 的属性配置
属性 | 类型 | 默认值 | 功能描述 | 示例 |
---|---|---|---|---|
initW | Number | null | 设置初始宽度(px) | <Vue3DraggableResizable :initW=“100” /> |
initH | Number | null | 设置初始高度(px) | <Vue3DraggableResizable :initH=“100” /> |
w | Number | 0 | 组件的当前宽度(px),你可以使用“v-model:w”语法使它和父组件保持一致 | <Vue3DraggableResizable v-model:w=“100” /> |
h | Number | 0 | 组件的当前高度(px),你可以使用“v-model:h”语法使它和父组件保持一致 | <Vue3DraggableResizable v-model:h=“100” /> |
x | Number | 0 | 组件距离父容器的左侧的距离(px),你可以使用“v-model:x”语法使它和父组件保持一致 | <Vue3DraggableResizable v-model:x=“100” /> |
y | Number | 0 | 组件距离父容器的右侧的距离(px),你可以使用“v-model:y”语法使它和父组件保持一致 | <Vue3DraggableResizable v-model:y=“100” /> |
minW | Number | 20 | 组件的最小宽度(px) | <Vue3DraggableResizable :minW=“100” /> |
minH | Number | 20 | 组件的最小高度(px) | <Vue3DraggableResizable :minH=“100” /> |
active | Boolean | false | 组件当前是否处于活跃状态,你可以使用“v-model:active”语法使它和父组件保持一致 | <Vue3DraggableResizable v-model:active=“true” /> |
draggable | Boolean | true | 组件是否可拖动 | <Vue3DraggableResizable :draggable=“false” /> |
resizable | Boolean | true | 组件是否可调整大小 | <Vue3DraggableResizable :resizable=“false” /> |
lockAspectRatio | Boolean | false | 该属性用来设置是否锁定比例 | <Vue3DraggableResizable :lockAspectRatio=“true” /> |
disabledX | Boolean | false | 是否禁止组件在 X 轴上移动 | <Vue3DraggableResizable :disabledX=“true” /> |
disabledY | Boolean | false | 是否禁止组件在 Y 轴上移动 | <Vue3DraggableResizable :disabledY=“true” /> |
disabledW | Boolean | false | 是否禁止组件修改宽度 | <Vue3DraggableResizable :disabledW=“true” /> |
disabledH | Boolean | false | 是否禁止组件修改高度 | <Vue3DraggableResizable :disabledH=“true” /> |
parent | Boolean | false | 是否将组件的拖动和缩放限制在其父节点内,即组件不会超出父节点,默认关闭 | <Vue3DraggableResizable :parent=“true” /> |
handles | Array | [‘tl’, ‘tm’, ‘tr’, ‘ml’, ‘mr’, ‘bl’, ‘bm’, ‘br’] | 定义缩放的句柄(共八个方向): tl : 上左 tm : 上中 tr : 上右 mr : 中左 ml : 中右 bl : 下左 bm : 下中 br : 下右 | <Vue3DraggableResizable :handles=“[‘tl’,‘tr’,‘bl’,‘br’]” /> |
classNameDraggable | String | ‘draggable’ | 自定义组件的类名,该类名在组件是“可拖动”时显示 | <Vue3DraggableResizable classNameDraggable=“draggable” /> |
classNameResizable | String | ‘resizable’ | 自定义组件类名,该类名在组件是“可缩放”时显示 | <Vue3DraggableResizable classNameResizable=“resizable” /> |
classNameDragging | String | ‘dragging’ | 定义组件在拖动时显示的类名 | <Vue3DraggableResizable classNameDragging=“dragging” /> |
classNameResizing | String | ‘resizing’ | 定义组件在缩放时显示的类名 | <Vue3DraggableResizable classNameResizing=“resizing” /> |
classNameActive | String | ‘active’ | 定义组件在活跃状态下的类名 | <Vue3DraggableResizable classNameActive=“active” /> |
classNameHandle | String | ‘handle’ | 定义缩放句柄的类名 | <Vue3DraggableResizable classNameHandle=“my-handle” /> |
classNameHandle | String | ‘handle’ | 定义缩放句柄的类名 | <Vue3DraggableResizable classNameHandle=“my-handle” /> |
2、Vue3DraggableResizable 的事件
事件 | 入参 | 触发时机 | 功能描述 | 示例 |
---|---|---|---|---|
activated | - | 组件从非活跃状态到活跃状态时触发 | - | <Vue3DraggableResizable @activated=“activatedHandle”/> |
deactivated | - | 组件从活跃状态到非活跃状态时触发 | - | <Vue3DraggableResizable @deactivated=“deactivatedHandle”/> |
drag-start | { x: number, y: number } | 组件开始拖动时触发 | - | <Vue3DraggableResizable @drag-start=“dragStartHandle”/> |
dragging | { x: number, y: number } | 组件在拖动过程中持续触发 | - | <Vue3DraggableResizable @dragging=“draggingHandle”/> |
drag-end | { x: number, y: number } | 组件拖动结束时触发 | - | <Vue3DraggableResizable @drag-end=“dragEndHandle”/> |
resize-start | { x: number, y: number, w: number, h: number } | 组件开始缩放时触发 | - | <Vue3DraggableResizable @resize-start=“resizeStartHandle” /> |
resizing | { x: number, y: number, w: number, h: number } | 组件在缩放过程中持续触发 | - | <Vue3DraggableResizable @resizing=“resizingHandle” /> |
resize-end | { x: number, y: number, w: number, h: number } | 组件缩放结束时触发 | - | <Vue3DraggableResizable @resize-end=“resizeEndHandle” /> |
二、Vue3DraggableResizable 的使用案例
以 vue3 项目为例,看看 Vue3DraggableResizable 的用法:
首先,在 main.ts 中引入 Vue3DraggableResizable,并将其挂在到vue实例上:
// 引入拖拽库
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
// Vue 实例
const app = createApp(App)
app.use(Vue3DraggableResizable)
然后在组件中的使用如下:
<template>
<!-- 拖拽组件 -->
<Vue3DraggableResizable
v-if="isShowMapToolBar"
classNameDraggable="draggable"
:initW="70"
:initH="30"
v-model:x="dragData.x"
v-model:y="dragData.y"
v-model:w="dragData.w"
v-model:h="dragData.h"
v-model:active="dragData.active"
:draggable="true"
:resizable="true"
:parent="true"
@activated="print('activated')"
@deactivated="print('deactivated')"
@drag-start="print('drag-start')"
@resize-start="print('resize-start')"
@dragging="print('dragging')"
@resizing="print('resizing')"
@drag-end="print('drag-end')"
@resize-end="print('resize-end')"
>
<div>Test</div>
</Vue3DraggableResizable>
</template>
<script setup lang="ts">
// 拖拽的配置
const dragData = reactive({
x: 10,
y: 10,
h: 100,
w: 100,
active: false,
});
// 拖拽的事件
const print = (val) => {
console.log(val)
};
</script>