vue3 拖拽插件 Vue3DraggableResizable

Vue3DraggableResizable 拖拽插件的官方文档

一、Vue3DraggableResizable 的属性和事件

1、Vue3DraggableResizable 的属性配置

属性 类型 默认值 功能描述 示例
initW Number null 设置初始宽度(px)
initH Number null 设置初始高度(px)
w Number 0 组件的当前宽度(px),你可以使用“v-model:w”语法使它和父组件保持一致
h Number 0 组件的当前高度(px),你可以使用“v-model:h”语法使它和父组件保持一致
x Number 0 组件距离父容器的左侧的距离(px),你可以使用“v-model:x”语法使它和父组件保持一致
y Number 0 组件距离父容器的右侧的距离(px),你可以使用“v-model:y”语法使它和父组件保持一致
minW Number 20 组件的最小宽度(px)
minH Number 20 组件的最小高度(px)
active Boolean false 组件当前是否处于活跃状态,你可以使用“v-model:active”语法使它和父组件保持一致
draggable Boolean true 组件是否可拖动
resizable Boolean true 组件是否可调整大小
lockAspectRatio Boolean false 该属性用来设置是否锁定比例
disabledX Boolean false 是否禁止组件在 X 轴上移动
disabledY Boolean false 是否禁止组件在 Y 轴上移动
disabledW Boolean false 是否禁止组件修改宽度
disabledH Boolean false 是否禁止组件修改高度
parent Boolean false 是否将组件的拖动和缩放限制在其父节点内,即组件不会超出父节点,默认关闭
handles Array [‘tl’, ‘tm’, ‘tr’, ‘ml’, ‘mr’, ‘bl’, ‘bm’, ‘br’] 定义缩放的句柄(共八个方向):
tl : 上左
tm : 上中
tr : 上右
mr : 中左
ml : 中右
bl : 下左
bm : 下中
br : 下右
classNameDraggable String ‘draggable’ 自定义组件的类名,该类名在组件是“可拖动”时显示
classNameResizable String ‘resizable’ 自定义组件类名,该类名在组件是“可缩放”时显示
classNameDragging String ‘dragging’ 定义组件在拖动时显示的类名
classNameResizing String ‘resizing’ 定义组件在缩放时显示的类名
classNameActive String ‘active’ 定义组件在活跃状态下的类名
classNameHandle String ‘handle’ 定义缩放句柄的类名
classNameHandle String ‘handle’ 定义缩放句柄的类名

2、Vue3DraggableResizable 的事件

事件 入参 触发时机 功能描述 示例
activated - 组件从非活跃状态到活跃状态时触发 -
deactivated - 组件从活跃状态到非活跃状态时触发 -
drag-start { x: number, y: number } 组件开始拖动时触发 -
dragging { x: number, y: number } 组件在拖动过程中持续触发 -
drag-end { x: number, y: number } 组件拖动结束时触发 -
resize-start { x: number, y: number, w: number, h: number } 组件开始缩放时触发 -
resizing { x: number, y: number, w: number, h: number } 组件在缩放过程中持续触发 -
resize-end { x: number, y: number, w: number, h: number } 组件缩放结束时触发 -

二、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>Testdiv>
    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>

你可能感兴趣的:(vue3,拖拽插件)