前端開發(fā)中徒河，最讓人頭大的問題之一就是頁面響應(yīng)式問題刚照，常見解決方式有，使用媒體查詢等摔认。在iview中有Grid柵格布局方式逆皮，可兼容不同分辨率，但有時候卻不能滿足響應(yīng)式需求......
1. 先說說iview 柵格布局
-
iview柵格布局采用24柵格系統(tǒng)参袱，將區(qū)域進(jìn)行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支持根據(jù)不同分辨率設(shè)置占位格數(shù)
image.png
使用時:
<i-col :xxl="6" :xl="8" :lg="12" :md="24" >
官網(wǎng)地址：柵格 Grid - iView (iviewui.com)
分割線
-
然鵝环壤，BUT晒来，在split中使用Grid失效了......
原因：Grid在瀏覽器窗口大小改變事能夠根據(jù)分辨率自動設(shè)置占位數(shù)，但是split并不改變?yōu)g覽器窗口大小郑现，所以湃崩，柵格布局失效了......
劃重點(diǎn)
解決辦法：
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拖拽事件中荧降，根據(jù)應(yīng)用Grid布局的 父元素 （父元素也要包含在split中 ）寬度，動態(tài)定義grid中各項(xiàng)的值攒读。
使用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 中調(diào)用該函數(shù)，即可解決響應(yīng)式問題整陌。
完
歡迎交流學(xué)習(xí)
image.png
