南阳建网站公司苏州网站设计制作
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><!-- 拖拽组件 --><Vue3DraggableResizablev-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>