logo

Vue3DragResizable

> [Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线 ## 文档目录 - [关于](#关于) - [特性](#特性) - [使用方法](#使用) - [组件 Props](#props) - [组件 Events](#events) - [使用吸附对齐功能](#使用吸附对齐功能) ### 关于 黄勇超（奇霖技术团队） - [博客文档地址](https://juejin.cn/user/651339234018797) - [个人主页](https://koshufujime.com/hyc/index.html) - [百度百科](https://baike.baidu.com/item/%E9%BB%84%E5%8B%87%E8%B6%85?fromModule=lemma_search-box) - [头条百科](https://www.baike.com/wikiid/7191829841028289844?prd=home_search&search_id=1oydeb6ko7pc00&view_id=25htz2aiy8jk00) ### 特性 - 支持拖拽和缩放，可分别定义开启或关闭 - 自定义缩放句柄（缩放时共有八个方位可操作，可分别定义开启或关闭） - 限制组件的拖动和缩放在其父节点内 - 自定义组件内各种类名 - 缩放句柄的类名也可自定义 - 元素吸附对齐 - 实时参考线 - 自定义参考线 - 使用 Vue3 和 ts ### 使用 ```bash $ npm install vue3-drag-resizable ``` 使用 use 方法注册组件 ```js // >main.js import { createApp } from 'vue' import App from './App.vue' import Vue3DragResizable from 'vue3-drag-resizable' //需引入默认样式 import 'vue3-drag-resizable/dist/Vue3DragResizable.css' // 你将会获得一个名为Vue3DragResizable的全局组件 createApp(App) .use(Vue3DragResizable) .mount('#app') ``` 也可以单独在你的组件内部使用 ```js // >component.js import { defineComponent } from 'vue' import Vue3DragResizable from 'vue3-drag-resizable' //需引入默认样式 import 'vue3-drag-resizable/dist/Vue3DragResizable.css' export default defineComponent({ components: { Vue3DragResizable } // ...other }) ``` 下面是一个使用 vue-template 语法写的例子 ```vue ``` ### Props #### initW type: `Number`
default: `null`
设置初始宽度（px） ```html ``` #### initH type: `Number`
default: `null`
设置初始高度（px） ```html ``` #### w type: `Number`
default: `0`
组件的当前宽度（px）
你可以使用“v-model:w”语法使它和父组件保持一致 ```html ``` #### h type: `Number`
default: `0`
组件的当前高度（px）
你可以使用“v-model:h”语法使它和父组件保持一致 ```html ``` #### x type: `Number`
default: `0`
组件距离父容器的左侧的距离（px）
你可以使用“v-model:x”语法使它和父组件保持一致 ```html ``` #### y type: `Number`
default: `0`
组件距离父容器顶部的距离（px）
你可以使用“v-model:y”语法使它和父组件保持一致 ```html ``` #### minW type: `Number`
default: `20`
组件的最小宽度（px） ```html ``` #### minH type: `Number`
default: `20`
组件的最小高度（px） ```html ``` #### active type: `Boolean`
default: `false`
组件当前是否处于活跃状态
你可以使用“v-model:active”语法使它和父组件保持一致 ```html ``` #### draggable type: `Boolean`
default: `true`
组件是否可拖动 ```html ``` #### resizable type: `Boolean`
default: `true`
组件是否可调整大小 ```html ``` #### lockAspectRatio type: `Boolean`
default: `false`
该属性用来设置是否锁定比例 ```html ``` #### disabledX type: `Boolean`
default: `false`
是否禁止组件在 X 轴上移动 ```html ``` #### disabledY type: `Boolean`
default: `false`
是否禁止组件在 Y 轴上移动 ```html ``` #### disabledW type: `Boolean`
default: `false`
是否禁止组件修改宽度 ```html ``` #### disabledH type: `Boolean`
default: `false`
是否禁止组件修改高度 ```html ``` #### parent type: `Boolean`
default: `false`
是否将组件的拖动和缩放限制在其父节点内，即组件不会超出父节点，默认关闭 ```html ``` #### handles type: `Array`
default: `['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']` 定义缩放的句柄（共八个方向） - `tl` : 上左 - `tm` : 上中 - `tr` : 上右 - `mr` : 中左 - `ml` : 中右 - `bl` : 下左 - `bm` : 下中 - `br` : 下右 ```html ``` #### classNameDraggable type: `String`
default: `draggable` 自定义组件的类名，该类名在组件是“可拖动”时显示 ```html ``` #### classNameResizable type: `String`
default: `resizable` 自定义组件类名，该类名在组件是“可缩放”时显示 ```html ``` #### classNameDragging type: `String`
default: `dragging` 定义组件在拖动时显示的类名 ```html ``` #### classNameResizing type: `String`
default: `resizing` 定义组件在缩放时显示的类名 ```html ``` #### classNameActive type: `String`
default: `active` 定义组件在活跃状态下的类名 ```html ``` #### classNameHandle type: `String`
default: `handle` 定义缩放句柄的类名 ```html ``` 以上设置将会渲染出下面的缩放句柄节点（my-handle-\*） ```html ...
... ``` ### Events #### activated payload: `-` 组件从非活跃状态到活跃状态时触发 ```html ``` #### deactivated payload: `-` 组件从活跃状态到非活跃状态时触发 ```html ``` #### drag-start payload: `{ x: number, y: number }` 组件开始拖动时触发 ```html ``` #### dragging payload: `{ x: number, y: number }v` 组件在拖动过程中持续触发 ```html ``` #### drag-end payload: `{ x: number, y: number }` 组件拖动结束时触发 ```html ``` #### resize-start payload: `{ x: number, y: number, w: number, h: number }` 组件开始缩放时触发 ```html ``` #### resizing payload: `{ x: number, y: number, w: number, h: number }` 组件在缩放过程中持续触发 ```html ``` #### resize-end payload: `{ x: number, y: number, w: number, h: number }` 组件缩放结束时触发 ```html ``` ### 使用吸附对齐功能 吸附对齐功能可以在拖动过程中和其他元素自动吸附，你也可以自定义吸附对齐的校准线 你需要引入另外一个组件来使用该特性 像下面这样，将 Vue3DragResizable 放在 DraggableContainer 内： ```vue ``` ### DraggableContainer Props 这些 props 适用于 DraggableContainer 组件 #### disabled type: `Boolean`
default: `false`
关闭吸附对齐功能 ```html Test Another test ``` #### adsorbParent type: `Boolean`
default: `true`
是否和父组件对齐，如果开启，则元素拖拽到父容器边缘（父容器的上中下左中右边）时会发生吸附，否则不会 ```html Test Another test ``` #### adsorbCols type: `Array`
default: `null`
自定义列的校准线，元素在x轴上拖动到这些线附近时，会产生吸附 ```html Test Another test ``` #### adsorbRows type: `Array`
default: `null`
自定义行的校准线，元素在y轴上拖动到这些线附近时，会产生吸附 ```html Test Another test ``` #### referenceLineVisible type: `Boolean`
default: `true`
是否显示实时参考线，元素在产生自动吸附后，会有一条参考线线出现，如果不需要，可通过该选项关闭。 ```html Test Another test ``` #### referenceLineColor type: `String`
default: `#f00`
实时参考线的颜色，默认红色 ```html Test Another test ```