2021-07-23

动画

fade 淡入淡出提供 el-fade-in-linear 和 el-fade-in 两种效果。

zoom 缩放

el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom

collapse 展开折叠

使用 el-collapse-transition 组件实现折叠展开效果。

Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

1两份三份四分五分无（间隙的）

2分栏间隔（每一栏）

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

3分栏间隔（任意栏）

4分栏偏移 通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数

5对齐方式

通过 flex 布局来对分栏进行灵活的对齐，无间隙

6将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

7响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs最小、sm小、md中、lg大 和 xl大一号。

8基于断点的隐藏类

引入import 'element-ui/lib/theme-chalk/display.css';

hidden-xs-only down up

9Row行 Attributes row的属性

10col柱 

 11Container 布局容器

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

采用了 flex 布局，使用前请确定目标浏览器是否兼容

12圆角投影

无圆角 border-radius: 0px

圆形圆角 border-radius: 30px

基础投影有边 box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

浅色投影白边 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

13Icon图标--- 

直接通过设置类名为 el-icon-iconName 来使用即可

14Button 按钮 

使用type类型、plain朴素的、round圆角和circle圆属性来定义 Button 的样式。

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

文字按钮

图标按钮---icon="el-icon-edit"

只要使用i标签即可，可以使用自定义图标

<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>

按钮组使用---以按钮组的方式出现，常用于多项类似操作

<el-button-group>标签来嵌套你的按钮

加载中---点击按钮后进行数据加载操作，在按钮上显示加载状态。

要设置为 loading 状态，只要设置loading属性为true即可。

代码:loading="true"

不同尺寸----额外的尺寸：medium、small、mini，通过设置size属性来配置它们。 

代码size="medium"

15Link 文字链接el-link   用disabled禁用

 下划线<el-link :underline="false">无下划线</el-link> <el-link>有下划线</el-link>

带图标的文字链接可增强辨识度

 

<el-link icon="el-icon-edit">编辑</el-link>
  <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>