Web核心技术之Element组件库学习及综合案例

默认按钮

主要按钮

成功按钮

信息按钮

警告按钮

删除

朴素按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

圆角按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

2.2 Element 布局

Element 提供了两种布局方式，分别是：

• Layout 布局

• Container 布局容器

2.2.1 Layout 局部

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

在左菜单栏找到 Layout 布局 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 head 标签内，将html标签拷贝到 <div id="app"></div> 标签内。

整体页面代码如下：

现在需要添加一行，要求该行显示8个格子，通过计算每个格子占 3 栏，具体的html 代码如下

2.2.2 Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。

如下图是官网提供的 Container 布局容器实例：

该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <style> 拷贝到我们自己页面的 head 标签中；将html标签拷贝到 <div id="app"></div> 标签中，再将数据模型拷贝到 vue 对象的 data() 中。

整体页面代码如下：

导航一

分组一

选项1

选项2

选项3

选项4

选项4-1

导航二

选项1

选项1-1

导航三

分组一

选项1

选项2

选项3

选项4

选项4-1

查看

新增

删除

王小虎

2.3 案例

其他的组件我们通过完成一个页面来学习。

我们要完成如下页面效果

要完成该页面，我们需要先对这个页面进行分析，看页面由哪儿几部分组成，然后到官网进行拷贝并修改。页面总共有如下组成部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q3bPLoHn-1642766557864)(assets/image-20210831185505106.png)]

还有一个是当我们点击 新增 按钮，会在页面正中间弹出一个对话框，如下

2.3.1 准备基本页面

2.3.2 完成表格展示

使用 Element 整体的思路就是 拷贝 + 修改。

2.3.2.1 拷贝

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cMgO0W94-1642766557868)(assets/image-20210831185937618.png)]

在左菜单栏找到 Table 表格并点击，右边主体就会定位到表格这一块，找到我们需要的表格效果（如上图），点击 显示代码 就可以看到这个表格的代码了。

将html标签拷贝到 <div id="app"></div> 中，如下：