前端开发中，最让人头大的问题之一就是页面响应式问题，常见解决方式有，使用媒体查询等。在iview中有Grid栅格布局方式，可兼容不同分辨率，但有时候却不能满足响应式需求......
1. 先说说iview 栅格布局
-
iview栅格布局采用24栅格系统，将区域进行24等分，可解决大部分布局问题。
image.png -
通过给 row 添加 gutter 属性，可以给下属的 col 添加间距。
image.png
代码：
<Row :gutter="16">
<Col span="6">
<div>col-6</div>
</Col>
<Col span="6">
<div>col-6</div>
</Col>
<Col span="6">
<div>col-6</div>
</Col>
<Col span="6">
<div>col-6</div>
</Col>
</Row>
-
除此之外，Grid支持根据不同分辨率设置占位格数
image.png
使用时:
<i-col :xxl="6" :xl="8" :lg="12" :md="24" >
官网地址：栅格 Grid - iView (iviewui.com)
分割线
-
然鹅，BUT，在split中使用Grid失效了......
原因：Grid在浏览器窗口大小改变事能够根据分辨率自动设置占位数，但是split并不改变浏览器窗口大小，所以，栅格布局失效了......
划重点
解决办法：
1.在data中定义变量,
// js:
data:{
grid:{
xxl:6,
xl:6,
lg:6,
md:6,
}
}
// html:
<i-col :xxl="grid.xxl" :xl="grid.xl" :lg="grid.lg" :md="grid.md"
2.在split拖拽事件中，根据应用Grid布局的 父元素 （父元素也要包含在split中 ）宽度，动态定义grid中各项的值。
使用on-moving事件
image.png
split地址：面板分割 Split - iView (iviewui.com)
onMoving(){
// 获取父元素宽度
let width = document.querySelector('.parent').getClientRects()[0].width;
if (width < XXX) {
this.grid.xxl = 24;
} else if (width < XXX) {
this.grid.xxl = 12;
} else if (width < XXXX) {
this.grid.xxl = 8;
} else {
this.grid.xxl = 6;
}
3.同时，在window.onresize 中调用该函数，即可解决响应式问题。
完
欢迎交流学习
image.png
