vue-grid-layout(脚手架版本)

项目需要,可灵活布局的组件
网上搜了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
}


	
    

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   	-	        布局位置

你可能感兴趣的:(vue)