首页 前端知识 vue3 拖拽插件 Vue3DraggableResizable

vue3 拖拽插件 Vue3DraggableResizable

2024-02-11 10:02:46 前端知识 前端哥 999 814 我要收藏

Vue3DraggableResizable 拖拽插件的官方文档

一、Vue3DraggableResizable 的属性和事件

1、Vue3DraggableResizable 的属性配置

属性类型默认值功能描述示例
initWNumbernull设置初始宽度(px)<Vue3DraggableResizable :initW=“100” />
initHNumbernull设置初始高度(px)<Vue3DraggableResizable :initH=“100” />
wNumber0组件的当前宽度(px),你可以使用“v-model:w”语法使它和父组件保持一致<Vue3DraggableResizable v-model:w=“100” />
hNumber0组件的当前高度(px),你可以使用“v-model:h”语法使它和父组件保持一致<Vue3DraggableResizable v-model:h=“100” />
xNumber0组件距离父容器的左侧的距离(px),你可以使用“v-model:x”语法使它和父组件保持一致<Vue3DraggableResizable v-model:x=“100” />
yNumber0组件距离父容器的右侧的距离(px),你可以使用“v-model:y”语法使它和父组件保持一致<Vue3DraggableResizable v-model:y=“100” />
minWNumber20组件的最小宽度(px)<Vue3DraggableResizable :minW=“100” />
minHNumber20组件的最小高度(px)<Vue3DraggableResizable :minH=“100” />
activeBooleanfalse组件当前是否处于活跃状态,你可以使用“v-model:active”语法使它和父组件保持一致<Vue3DraggableResizable v-model:active=“true” />
draggableBooleantrue组件是否可拖动<Vue3DraggableResizable :draggable=“false” />
resizableBooleantrue组件是否可调整大小<Vue3DraggableResizable :resizable=“false” />
lockAspectRatioBooleanfalse该属性用来设置是否锁定比例<Vue3DraggableResizable :lockAspectRatio=“true” />
disabledXBooleanfalse是否禁止组件在 X 轴上移动<Vue3DraggableResizable :disabledX=“true” />
disabledYBooleanfalse是否禁止组件在 Y 轴上移动<Vue3DraggableResizable :disabledY=“true” />
disabledWBooleanfalse是否禁止组件修改宽度<Vue3DraggableResizable :disabledW=“true” />
disabledHBooleanfalse是否禁止组件修改高度<Vue3DraggableResizable :disabledH=“true” />
parentBooleanfalse是否将组件的拖动和缩放限制在其父节点内,即组件不会超出父节点,默认关闭<Vue3DraggableResizable :parent=“true” />
handlesArray[‘tl’, ‘tm’, ‘tr’, ‘ml’, ‘mr’, ‘bl’, ‘bm’, ‘br’]定义缩放的句柄(共八个方向):
tl : 上左
tm : 上中
tr : 上右
mr : 中左
ml : 中右
bl : 下左
bm : 下中
br : 下右
<Vue3DraggableResizable :handles=“[‘tl’,‘tr’,‘bl’,‘br’]” />
classNameDraggableString‘draggable’自定义组件的类名,该类名在组件是“可拖动”时显示<Vue3DraggableResizable classNameDraggable=“draggable” />
classNameResizableString‘resizable’自定义组件类名,该类名在组件是“可缩放”时显示<Vue3DraggableResizable classNameResizable=“resizable” />
classNameDraggingString‘dragging’定义组件在拖动时显示的类名<Vue3DraggableResizable classNameDragging=“dragging” />
classNameResizingString‘resizing’定义组件在缩放时显示的类名<Vue3DraggableResizable classNameResizing=“resizing” />
classNameActiveString‘active’定义组件在活跃状态下的类名<Vue3DraggableResizable classNameActive=“active” />
classNameHandleString‘handle’定义缩放句柄的类名<Vue3DraggableResizable classNameHandle=“my-handle” />
classNameHandleString‘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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1733.html
评论
发布的文章

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

浏览器调用摄像头

2024-02-25 11:02:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!