Element实现响应式布局

分享一下，在Vue3项目中实现响应式布局（一行显示7列）。在这个例子中，我参考了Element官方的Layout布局，使用el-card来放置图片。
利用分栏布局，el-row行上设置每列的间隔gutter，el-col上设置响应式的栅格布局，Element官方预设了5个响应式尺寸，官方给出了详细的属性解释。这个例子中我设置了4个尺寸。

栅格默认的占据的列数是24，设置24就是一列，设置12就显示两列，设置8就显示3列，设置6就显示4列，设置4显示6列......可以根据自己的场景需求来进行布局。这个例子中我设置的响应式布局如下：

:xs="12" 当浏览器宽度<768px时，一行展示2列

:sm="8" 当浏览器宽度>=768px时，一行展示3列

:md="6" 当浏览器宽度>=992px时，一行展示4列

:lg="{ span: '7' }" 当浏览器宽度>=1200px时，一行展示7列 这个需要在css样式中设置一下。

这里例子中的图片都是放在el-card中的，并且图片都是一样大小的。修改图片可以利用图片处理工具，分享一个自己常用的工具：轻量级图片处理工具photopea。
Element的Card组件由 header 和 body 组成。 header 是可选的，卡片可以只有内容区域。可以配置 body-style 属性来自定义body部分的style。
:body-style="{padding:10px}" ，这个其实是对el-card头部自动生成的横线下方的body进行边距设置。也就是除了el-card的header部分，其余都是body部分了。
这里例子中没有头部，就是给卡片的body部分设置内边距。

具体代码如下所示：

图片效果如下所示：
当浏览器宽度>=1200px时，一行展示7列：

当浏览器宽度>=992px时，一行展示4列：

当浏览器宽度>=768px时，一行展示3列：

当浏览器宽度<768px时，一行展示2列：

接下来，优化一下页面，对图片进行懒加载处理。

图片懒加载

看下上面没有用于懒加载方式的情况，F12---NetWork---Img可以看到页面加载就会显示这个页面用到的所有图片。

可以利用vue-lazyload，它是一个Vue.js 图片懒加载插件，可以在页面滚动至图片加载区域内时按需加载图片，进一步优化页面加载速度和性能。采用懒加载技术，可以仅在需要加载的情况下再进行加载，从而减少资源的消耗。也就是在页面加载时仅加载可视区域内的图片，而对于网页下方的图片，我们滑动到该图片时才会进行加载。

下载、引入vue-lazyload

npm install vue-lazyload --save

在package.json中查看：

在main.ts中引入：

使用vue-lazyload

在需要使用懒加载的图片中使用v-lazy指令替换src属性。

也可以是下面的写法：

这样，就实现图片的懒加载了。
验证一下懒加载是否生效，F12---NetWork---Img，可以看到图片的加载情况。

一开始没有滑动到图片区域，就不会加载图片，可以在Img中看到loding占位图片在显示。

滑动到了对应的照片才会显示对应的图片信息。