项目需要，可灵活布局的组件
网上搜了vue-grid-layout 写法为单文件引入模式的，才疏学浅，研究了一下

1. 安装

cnpm install --save vue-grid-layout

2. 使用

直接在要用的组件里import就可以

//script标签下
import { GridLayout,GridItem } from 'vue-grid-layout'

//export default
data(){
	return{
		layout:[
			{"x":0,"y":0,"w":4,"h":2,"i":0} //数据格式
		]
	}
},
components: {
	GridLayout,
	GridItem
}

<gridLayout :autoSize=false :layout="layout" :col-num="30" :row-height="10"  :is-resizable="true" :is-mirrored="false" :vertical-compact="true" :margin="[5, 5]" :use-css-transforms="true" :configData="configData">
	<gridItem v-for="item in layout"  @resized="resized(item.i)"  :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
    </gridItem>
</gridLayout>

3. 参数

参数	                类型  	 默认值	  说明
autoSize	        Boolean	    true	    是否根据内容确定容器的高度
colNum	            Number	    12	        列数
rowHeight	        Number	    150	        行高
maxRows	            Number	    Infinity	最大的行高
margin	            Array	    [10, 10]	两个可移动元素间的距离
isDraggable	        Boolean	    true	    是否支持推拽
isResizable	        Boolean	    true	    是否支持改变大小
useCssTransforms	Boolean 	true	    是否使用自定义的过渡效果
verticalCompact	    Boolean 	true	    是否使用verticalCompact布局
layout	            Array   	-	        布局位置