福田做商城网站建设哪家技术好,成都广告公司黑蚁,网站建设语,手机网站建设哪家便宜Vue3DraggableResizable 拖拽插件的官方文档
一、Vue3DraggableResizable 的属性和事件
1、Vue3DraggableResizable 的属性配置
属性类型默认值功能描述示例initWNumbernull设置初始宽度#xff08;px#xff09;Vue3DraggableResizable :initW“100” /initHNumb…Vue3DraggableResizable 拖拽插件的官方文档
一、Vue3DraggableResizable 的属性和事件
1、Vue3DraggableResizable 的属性配置
属性类型默认值功能描述示例initWNumbernull设置初始宽度pxVue3DraggableResizable :initW“100” /initHNumbernull设置初始高度pxVue3DraggableResizable :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组件的最小宽度pxVue3DraggableResizable :minW“100” /minHNumber20组件的最小高度pxVue3DraggableResizable :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!-- 拖拽组件 --Vue3DraggableResizablev-ifisShowMapToolBarclassNameDraggabledraggable:initW70:initH30v-model:xdragData.xv-model:ydragData.yv-model:wdragData.wv-model:hdragData.hv-model:activedragData.active:draggabletrue:resizabletrue:parenttrueactivatedprint(activated)deactivatedprint(deactivated)drag-startprint(drag-start)resize-startprint(resize-start)draggingprint(dragging)resizingprint(resizing)drag-endprint(drag-end)resize-endprint(resize-end)divTest/div/Vue3DraggableResizable
/template
script setup langts
// 拖拽的配置
const dragData reactive({x: 10,y: 10,h: 100,w: 100,active: false,
});
// 拖拽的事件
const print (val) {console.log(val)
};
/script
