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)
}

五、页面引用

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
	}]




	

	             
   

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