vue实现组件自定义布局及拖拽

vue-grid-layout

• 实现功能：可拖拽页面组件位置及改变其大小

安装

npm install vue-grid-layout@2.3.9--save

使用

<template>
  <grid-layout
    :layout="LayoutData"
    :auto-size="false"//容器自动调整大小,默认true
    :col-num="12"//栅格的数量，默认12
    :row-height="20"//行高，默认150，值越小，越精确
    :is-draggable="true"//拖拽,默认true
    :is-resizable="false"//改变大小,默认true
    :margin="[20, 20]"//值必须是包含两个 Number的数组，数组中第一个元素表示水平边距，第二个表示垂直边距，单位为像素；
    :use-css-transforms="true" //是否使用CSS属性,默认true
    :use-style-cursor="false"//是否使用动态鼠标指针样式。当拖动出现卡顿时，将此值设为 false也许可以缓解布局问题
  >
    <grid-item
    	v-for="item in layoutList"
    	:key="item.i"
		:x="item.x"//水平相对位置，Number,必填
		:y="item.y"//垂直相对位置，Number,必填
		:w="item.w"//宽度，Number,必填，col-num倍数
        :h="item.h"//高度，Number,必填，row-height倍数
        :i="item.i"//String，必填
        :minW="item.minW"//最小宽度，值为colWidth的倍数
        :minH="item.minH"//最小高度，值为rowHeight的倍数
        :maxW="item.maxW"//最大宽度，值为colWidth的倍数
        :maxH="item.maxH"//最大高度，值为rowHeight的倍数
		@resize="resizeEvent"//大小改变事件
		@move="moveEvent"//位置移动事件
		@resized="resizedEvent"//大小改变结束事件
		@moved="movedEvent"//位置移动结束事件
    >
    	<div v-if="item.id == 1"></div>
    	<div v-if="item.id == 2"></div>
    	<div v-if="item.id == 3"></div>
	</grid-item>
  </grid-layout>
</template>
<script>
  import Vue from 'vue'
  import VueGridLayout from 'vue-grid-layout'
  Vue.use(VueGridLayout);
  
  export default {
  	name: 'gridLayout;,
  	data() {
  		return {
  			layoutList: [
			    {"x":0,"y":0,"w":8,"h":10,"i":0},
			    {"x":0,"y":12,"w":8,"h":10,"i":1},
			    {"x":8,"y":0,"w":4,"h":20,"i":2}
			];
  		}
	},
	methods: {
		resizeEvent(i, newH, newW) {
			console.log('i', i);
			console.log('H', newH);
			console.log('W', newW);
		},
		moveEvent(i, newH, newW) {
			console.log('i', i);
			console.log('H', newH);
			console.log('W', newW);
		},
		resizedEvent(i, newH, newW) {
			console.log('i', i);
			console.log('H', newH);
			console.log('W', newW);
		},
		movedEvent(i, newH, newW) {
			console.log('i', i);
			console.log('H', newH);
			console.log('W', newW);
		},
	}