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