vue3+ts+vite+element plus 页面组件拖拽（vue-drag-resize）

前言：

        最近一个项目，需要实现页面上组件可以拖动的效果，类似于大屏幕上的组件位置配置，随机找了一下网上各种适配vue3的拖拽组件库。。。有好多！我这边选择了vue-drag-resize使用

效果展示：

 

使用

 一、vue3+ts+vite+element plus项目准备

此处省略n字。。。

二、官网瞅瞅

vue-drag-resize - npm

三、依赖安装

npm i -s vue-drag-resize

四、封装组件（封装的时候需要参考官网配置）

import VueDragResize from 'vue-drag-resize/src'


const w = ref(0)
const h = ref(0)
const top = ref(0)
const left = ref(0)
const name = ref('')
const value = ref('')
const dragKey = ref(0)
const image = ref()
const isDraggable = ref(true)

const dragType = ref(false)
const porps = defineProps({
	dargData: {
		type: Object,
		required: true
	},
	dragType: {
		type: Boolean,
		required: true
	}
})
w.value = porps.dargData.w
h.value = porps.dargData.h
top.value = porps.dargData.top
left.value = porps.dargData.left
name.value = porps.dargData.name
value.value = porps.dargData.value
isDraggable.value = porps.dargData.isDraggable
dragKey.value = porps.dargData.key
dragType.value = porps.dragType
image.value = undefined

const resize = (newRect) => {
	w.value = newRect.width
	h.value = newRect.height
	top.value = newRect.top
	left.value = newRect.left
	console.log(newRect)
}


<template>
	<VueDragResize
		:isActive="false"
		:w="w"
		:h="h"
		:x="left"
		:y="top"
		:parentW="clientWidth"
		:isDraggable="isDraggable"
		:parentH="800"
		:snapToGrid="true"
		:stickSize="12"
		:parentLimitation="true"
		@resizing="resize"
		@dragging="resize"
	>
		<div>我能拖动你信不</div>
		<svg-icon
			v-if="updateList.includes(dragKey) && !dragType"
			class="min-box"
			@click="openDia"
			name="shezhi"
		></svg-icon>
	</VueDragResize>
</template>

五、页面引用

import VueDrag from '@/components/drag/index.vue'

const dargData = reactive([
	{
		key: 1,
		w: 200,
		h: 30,
		top: 0,
		left: 0,
		name: '嘎嘎嘎',
		value: 'xxx',
		isDraggable: true
	}]




	<div class="mainD" style="border: 2px dashed #409eff; height: 800px; position: relative">
	<VueDrag v-for="item in dargData" :key="item.key" :dragType="false" :dargData="item">             
   </VueDrag>
</div>

问题记录：如果说要排版非常紧凑整齐的话，需要自己调整样式，因为默认行高可能导致排版紧密的需求出现很大间隙