饿了吗组件Element研究之基础篇

el-row包裹一行，距下20px

 el-col,一列   用法（el-col ：span="24", 1-24自由选择）

gutter：升首睁 指定栏与栏之间的间隔，默认为零。 用法 <el-row :gutter="20">

offset： 分栏偏移。 用法 <el-col :span="6" :offset="6">

将type属性赋值为 'flex'，可以启用 flex 布局，并可通过justify属性来指定 start, center, end, space-between（左右不留间隔）, space-around （左右也有间隔）其中的值来定义子元素的排版方式。

用法 <el-row type="flex" justify="center">芹喊

参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：xs、sm、md和lg。

通过设置类名为el-icon-iconName来使用即可。eg <i class="el-icon-edit"></i>

Button 组件默认提供7种主题，由type属性来定义，默认为default。

<el-button>默认按钮</el-button>

<el-button type="primary">默认按钮</el-button>

你可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值。

<el-button :plain="true"吵岁 :disabled="true">主要按钮</el-button>

type="success warning danger info"

自定义css??

.block:{padding:30px 24pxborder-bottom:#eff2f6}

.demonstration{font-size:14pxcolor:#8492a6line-height:44px}

.demo-button .intro-block .wrapper{float:rightmargin-right:20px}

.el-dropdown {display:inline-blockposition:relative}

el-table (--fit,--stripe,--border,,,) 

 - el-table__header-wrapper >table >thead >tr >th

 - el-table__body-wrapper  >table >tbody>tr(.el-table__row) >td

Skeleton Screen(骨架屏) 指的在页面数据尚未加载察辩游前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于内容列表页。

一、page-skeleton-webpack-plugin

page-skeleton-webpack-plugin 是一款由 ElemeFE 团队开发的webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。

二、插件自动生成骨架屏的主要原理

先demo展示一下如何自动生成骨架屏，后续再通过代码具体分析如何生成骨架屏：

安装运行环境

依赖环境：

安装puppeteer可参考：https://www.jianshu.com/p/a9a55c03f768

启动puppeteer并打开要生成骨架屏的页面

接下来分析makeSkeleton是如何生成骨架屏代码

入口代码在 page-skeleton-webpack-plugin/src/skeleton.js

初始化核心逻辑：

具体各块的骨架结构如何生成的接下来会败销一一分析

1、SVG块生成骨架结构

非隐藏的元素，会把 svg 元素内部所有元素删除，减少最终生成的骨架页面体积，其次，设置svg 元素的宽、高和形状等。

2、按钮块生成骨架结构

button块的处理相对比较简单，去除边框和阴影，设定好统一的背景色和文字，按钮块就处理完成了。

3、背景块生成骨架结构

背景块指有背景图或者背景色的元素。统一设置背景色即可。

4、图片块生成骨架结构

5、伪元素块处理骨架结构

6、文本块处理骨架结构

文本块相对处理起来会比较复杂些，所以放到最后来讲。

文本块定义：任何包含文本节点的元灶磨素都是文本块。

计算文本块的文本行数、文字高度（即要绘制的文本块高度=fontSize）：

通过线性渐变生成条纹背景的文本块：

单行文本需要计算文本宽度和text-aligin属性

以上就是elementUI开源的骨架屏插件的主要逻辑啦。当然还有涉及工程化相关的逻辑这里就没贴出来了，后续可以再慢慢探讨。

我抽空把生成骨架屏的逻辑单独抽出来，方便大家定制对骨架屏的工程化处理及调试

https://github.com/wookaoer/page-skeleton-core

饿了吗小程序氏轮怎么看聊天，这里分享下 *** 作方法。

设备：华为P30

系统：安卓15.8

软件：微信7.0.22

1、首先在手机中打开微信，如下图所示。

2、这时在打开的微信中，就可以进液档入到饿了么小程序中了。

3、进入之后，找到订单，点击订单下面的“在线联系”。

4、最后在打开的页面中，即可看到聊天记歼埋信录，或者根据自己需要输入问题，进行发送就完成了。

---