vue-grid-layout+component 实现动态布局__Vue.js
发布于 1 个月前 作者 banyungong 168 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

是什么?

git 地址: vue-grid-layout

官方 demo

代码

在线演示

常用参数解析

GridLayout

参数含义数据类型
colNum将一行分为多少块数字 默认 12
rowHeight行高数字 默认是单位是 px
isDraggable是否可以拖拽boolean
isResizable是否可以改变大小boolean
responsive是否是响应式的boolean

GridItem

参数含义类型
iid类型不限
x第几列数字
y第几行数字
w占几块数字
h高度 ,最后算出的元素高度是 h*rowHeight数字

主要代码

定义一个默认的布局

var testLayout = [
  {x: 0,y: 0,w: 6,h: 5,i: "0",component: "test1"},//0列0行 宽为5块,高为5*rowHeight
  {x: 6, y: 0, w: 6, h: 5, i: "1", component: "test2" },// 列为6(因为上一块的宽度是6)
  {x: 0,y: 5,w: 12,h: 10,i: "2",component: "test3"},//自己算一算吧
  {x: 0,y: 15,w: 12,h: 10,i: "3",component: "test4"}
];

生成布局

// 最外大的grid,绑定了testLayout的值,这样testLayout 会随着用户的拖拽放大缩小改变
// 可以参考官方的实例
<grid-layout
          :layout.sync="testLayout"
          :col-num="12"
          :row-height="55"
          :is-draggable="draggable"
          :is-resizable="resizable"
          :auto-size="true"
          :responsive="responsive"
        >
        // 遍历testLayout生成item
          <grid-item
            v-for="item in testLayout"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.key"
          >
            <div class="assistor">
             // 定义一个关闭按钮实现删除当前的
              <div class="close-icon" @click="deleteComponent(item.i)">
                <i class="el-icon-close"></i>
              </div>
              <h4 style="margin-bottom:10px">{{item.title}}</h4>
              // 这里使用component来显示组件。
              <component :is="item.component" style="padding-bottom:20px"></component>
            </div>
          </grid-item>
        </grid-layout>

css 样式

定义整个布局的背景颜色

.vue-grid-layout {
  position: relative;
  background: #fff;
}

定义每一个 item 的样式

.vue-grid-item{

}

GridItem 内部元素的样式
这里在 grid-item 内部加入一个 assistor,是因为如果 grid-item 内部元素的大小过大会出现滚动条
这里将 border 加在 assistor 上,
当然你也可以加在.vue-grid-item 上,但是如果你需要动态的增加组件的话,在增加的时候 boder 会加不上。

.assistor {
height: 100%;
overflow-y: scroll;
padding: 10px;
border: 1px solid rgb(224, 219, 219);
}

增加一个关闭的按钮

.close-icon {
float: right;
position: absolute;
text-align: right;
right: 0px;
top: 0px;
z-index: 200;
}

动态增减的实现思路

其实就是对 layout 进行操作
最简单的加法,直接占满第一行

this.testLayout.push({
x: 0,
y: 0,
w: 12,
h: 5,
i: this.layout.length,
name: “test5”
});

减法的话,直接根据传进来的 id 删除即可

deleteComponent(id){
this.testLayout = this.testLayout.filter(
item =>item.id===id
);
}

数据库

直接将 testLayout 存入数据库即可。

本文使用 mdnice 排版

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 樱舞 原文链接:https://juejin.im/post/6850418121619177486

回到顶部