Vue3DraggableResizable 实现可拖拽修改大小的组件

2,707 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第7天,点击查看活动详情

一些低代码平台的设计端会有这样功能的组件:用拖拽的方式将组件放入页面中,并可以调整组件的大小和位置。

目标效果如下图:

动画.gif

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. 效果

image.png

其它

需要对齐或者是流程相关的场景也可以进行配置,比如增加网格线:

  • 添加参数 :grid=[20,20]
image.png 除此之外,还可以实现元素吸附对齐、增加参考线等场景。

可参考Vue3DraggableResizable官方文档