elementui响应

响应式布局的实现

Element UI 提供了响应式布局的支持，主要通过栅格系统（Grid System）实现。栅格系统基于 flex 布局，允许页面在不同屏幕尺寸下自动调整布局。

栅格系统由 el-row 和 el-col 组件构成。el-row 定义一行，el-col 定义列，通过 span 属性控制列宽（共24等分）。

<el-row>
  <el-col :span="24"><div>100%宽度</div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div>50%宽度</div></el-col>
  <el-col :span="12"><div>50%宽度</div></el-col>
</el-row>

响应式断点设置

Element UI 预设了五个响应式尺寸，可通过 xs、sm、md、lg、xl 属性在不同屏幕宽度下设置列宽。

<el-row>
  <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
    <div>响应式列</div>
  </el-col>
</el-row>

• xs：<768px
• sm：≥768px
• md：≥992px
• lg：≥1200px
• xl：≥1920px

组件级别的响应式

部分组件内置响应式逻辑，例如 el-dialog 可根据屏幕宽度自动调整大小。可通过 width 属性设置为百分比或响应式值：

<el-dialog :width="'80%'">
  <!-- 内容 -->
</el-dialog>

响应式工具函数

Element UI 提供工具函数 resize，用于监听窗口大小变化：

import { resize } from 'element-ui';

resize.addHandler(() => {
  console.log('窗口大小变化');
});

自定义响应式样式

可通过覆盖默认的 SCSS 变量实现自定义响应式断点：

$--sm: 768px;
$--md: 992px;
$--lg: 1200px;
$--xl: 1920px;

引入自定义变量后重新编译样式即可生效。