开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第7天,点击查看活动详情
一些低代码平台的设计端会有这样功能的组件:用拖拽的方式将组件放入页面中,并可以调整组件的大小和位置。
目标效果如下图:
Vue2 和 Vue3 使用的版本有所不同
- Vue2:vue-draggable-resizable
- Vue3:Vue3DraggableResizable
下面介绍一下 Vue3 中如何来实现。
Vue3DraggableResizable
名字虽然很长,但是非常简单直白,官方对于这个组件的介绍是:用于拖拽调整位置和大小的的组件,同时支持冲突检测,元素吸附对齐,实时参考线。
他的特征是:在组件上形成可以调整大小的控制点,自由的进行尺寸调整
1. 安装
npm install vue3-draggable-resizable
2. 引入
可以全局或者局部引入:
全局:main.js 文件 配置
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
createApp(App).use(Vue3DraggableResizable)
局部:引入后,再在 components 中声明一下组件即可
3. 使用
使用 Vue3DraggableResizable 组件标签,并配置相关属性
- initW —— 初始宽度(单位为px)
- initH ——初始高度
- x、y、w、h —— 坐标及宽高值
- parent —— 组件是否限制在父节点内(默认为false,不限制)
- draggable —— 是否可拖动
- resizable —— 是否可调整大小
- @drag-start —— 拖动组件事件
- @resize-start —— 调整组件大小时触发
- ...
<Vue3DraggableResizable
:initW="110"
:initH="80"
v-model:x="x"
v-model:y="y"
v-model:w="w"
v-model:h="h"
v-model:active="active"
:parent="true"
:draggable="true"
:resizable="true"
@drag-start="start"
@resize-start="start"
@drag-end="end"
@resize-end="end"
>
<p>测试文字</p>
</Vue3DraggableResizable>
4. 效果
其它
需要对齐或者是流程相关的场景也可以进行配置,比如增加网格线:
- 添加参数 :grid=[20,20]
可参考Vue3DraggableResizable官方文档