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