吐血整理：iview项目中的响应式问题

前端开发中，最让人头大的问题之一就是页面响应式问题，常见解决方式有，使用媒体查询等。在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

原创