ElementUI笔记 -- 1

一. 认识ElementUI

1. 认识ElementUI

Element UI 目前提供了 56 个组件，分成了 6 大类，分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其他类型组件。作为一个 UI 组件库，提供这些丰富的组件能很好地满足大部分 PC 端业务开发需求。同时，若提供的组件无法满足需求，还能对它进行二次开发，节省了开发者的时间。

首先，我们访问一下 Element UI 的官网，逛一逛这个站点。

引入眼帘的是官网首页，如下图所示：

从网站上的导航栏可以看出，官网分为四个部分：指南、组件、主题和资源。

然后，我们点击 “指南”，可以发现这部分的内容分为 2 块：设计原则和导航。其中，包含四个设计原则（一致、反馈、效率、可控），而导航这部分的内容主要讲解是 Element UI 提供的导航功能。它将导航功能分为 “侧栏导航” 和 “顶部导航”，在项目设计工程中选择合适的导航类型能帮助用户降低产品的学习门槛。官方就提到了这两类导航之间的区别：

侧栏导航：提高导航可见性，方便页面之间切换。
顶部导航：顺应了从上至下的正常浏览顺序，方便浏览信息，但也限制了导航的数量和文本长度。

接着，我们在官网的顶部导航中点击 “组件”，这部分的内容就是我们平时开发过程中常用到的部分了。显而易见，”组件“ 板块提供了 6 大类型的组件，每个组件的下方还附有源码示例，也可以在 CodePen 中运行源码，如下图所示。

同时，在该板块还提供了使用指南等内容，方便开发者查阅。

接下来这个板块是 “主题” 。Element UI 的一大特色就是支持开发者自定义主题，你可以使用在线主题编辑器，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉效果。

最后一部分是 ”资源“，主要提供给设计师使用。Element UI 目前为 Axure 和 Sketch 两种设计工具提供了插件，方便设计师在这些软件中进行设计时调用 Element UI 的组件，从而保证视觉风格的统一。

2. ElementUI与Vue

Element UI 是 UI 框架，而 Vue 是前端框架，UI 框架一般是伴随着前端框架产生的。虽然目前 Element UI 为 Angular 和 React 也提供了组件库，但国内大多数开发者还是用它与 Vue 配合使用进行开发。

通常情况下，我们可以利用 Vue CLI 创建一个前端项目，然后引入和配置 Element UI。例如，当你使用 Vue CLI 生成了一个初始化 Vue 项目，你可以通过下面命令安装 Element UI：

npm install element-ui -S

接着在 package.json 文件中就会插入一条记录：

"dependencies": {
    "element-ui": "^2.15.1"
}

这就表明 Element UI 已成功安装到你的 Vue 项目中了。通过 import 语法就可以在项目中引入 Element UI 进行使用。

看到上面的 npm 安装步骤，想必大家都已经跃跃欲试了，同学们不要着急，这里仅是让大家对于 Element UI 与 Vue 有一个初步的理解，接下来我带大家手把手搭建开发环境。😉

本课程是基于 Vue 来学习 Element UI，如果同学们对 Element React 和 Element Angular 感兴趣，可以自行查看官方文档。

3. 使用npm来创建Vue项目

也可以基于命令行工具 Vue CLI 的方式去搭建 Vue 环境，本课程我们基于这个工具去搭建环境。那我们开始吧！

首先，打开你们右侧的环境，环境已经为大家安装了 Vue，所以我们直接在命令行输入以下命令来创建一个名为 vue-elementui 的项目。

为了保证后面代码正常运行和配置一致，所以先安装下指定版本的 Vue CLI。

npm install -g @vue/[email protected]

vue create vue-elementui

创建项目的过程中会让你选择预设的版本以及安装依赖时使用的包管理器。这里我们分别选择使用 Default ([Vue 2] babel, eslint) 和 NPM 作为预设以及包管理器。如下图所示。

选择之后，就进入安装进程中，安装成功后，我们可以看到创建的 Vue 项目文件，如下图所示：

然后，我们使用以下命令来初始化并启动项目。

cd vue-elementui
npm run serve

此时，我们点击右侧的 WEB 服务按钮，发现显示如下：

这是为什么呢？🤔

这是由于我们的线上环境只开放了 8080 端口，但是需要通过网站域名访问，而刚才打开的这个 devServer 服务器并没有与网站域名关联。

为了解决这个问题，我们需要在 vue-elementui 目录下创建一个 vue.config.js 文件，通过以下配置将该服务器映射到网站域名上：

const HOST = process.env.HOST;
module.exports = {
  publicPath: "./",
  productionSourceMap: false,
  devServer: {
    host: HOST || "0.0.0.0",
    open: true,
    disableHostCheck: true,
  },
};

添加完上述配置文件后，需要在终端中使用 ctrl+c 关闭 Vue 项目启动的服务器，然后使用以下命令重新启动。

npm run serve

此时浏览器中显示的就是我们的初始化应用了，如下图所示：

4. 添加ElementUI配置

前面我们只是利用 Vue CLI 初始化了基于 Vue 的项目，现在我们还需要添加 Element UI 配置。

在讲配置之前，我们先说一说 Element UI 的安装。

4.1 使用npm安装

我们在 vue-elementui 目录下命令执行以下命令：

npm i element-ui -S

照步骤操作的同学，上一步配置好域名映射后并没有关闭 devServer 服务，我们可以另开一个终端来执行 npm 安装，也可以用 ctrl+c 关闭服务后再安装。

安装成功后，我们打开 vue-elementui\src\main.js 文件，引入 Element UI。

Element UI 的引入有两种方式：完整引入和按需引入。

完整引入是把所有 Element UI 的组件都引入其中，在 main.js 中添加如下代码即可：

// main.js

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css"; // 样式文件需要单独引入
import App from "./App.vue";

// Vue.config.productionTip = false;
Vue.use(ElementUI);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

需要注意：

样式文件需要单独引入。
本门课后续的课程中都使用完整引入。

按需引入是只引入需要的组件。

我们需要 babel-plugin-component 的帮助才能实现按需引入。

首先，使用以下命令来安装 babel-plugin-component。

npm install babel-plugin-component -D

然后，将 .babelrc 修改为以下内容。

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

完成上述配置后，我们就可以按需引入了。比如我们引入 Button 和 Select，那我们需要在 main.js 中添加以下内容。

import Vue from "vue";
import { Button, Select } from "element-ui";
import App from "./App.vue";

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: "#app",
  render: (h) => h(App),
});

思考一下：按需引入和完整引入有什么区别呢？🤔

完整引入，即便你的代码没有使用所有组件，但所有的组件还是会被整体打包，这会造成模块资源占用的空间较大，而按需引入只会打包你用到的组件，使得项目的体积减小了。

ok！以上便完成了 Element UI 的引入，一个基于 Vue 和 Element UI 的开发环境已经搭建完毕，现在我们可以编写代码了。

5. 使用CDN的方式创建页面

搭建一个 Vue 的环境有多种方式，除了上面使用 npm 来创建 Vue 项目，你也可以在 html 文件中通过 <script> 标签去引入 Vue，如下所示：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

在 html 文件中，同样使用 CDN 的方式引入 ElementUI：

<!-- 引入样式 -->
<link
  rel="stylesheet"
  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

下面，我们创建一个 index.html 文件，写入以下代码来试一试

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 导入 ElementUI 的 CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 导入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 导入 ElementUI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>

  <body>
    <div id="app">
      <el-button type="primary">我是个按钮</el-button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {};
      },
    });
  </script>
</html>

效果如下所示：

二. Layout布局和Container布局容器

1. Container布局容器

当我们在写一个前端项目时，首先应该考虑页面的布局，设计好页面的布局后，才会用 CSS 样式去填充。比如，我们来看看 Element UI 官网组件页面的布局。

从上图可以看出，官网的布局可以分成四个容器，顶部容器、主要内容区域容器、侧边容器、底栏容器。在 Element UI 的组件库里为我们提供了对应的布局容器组件，方便我们实现页面的基本布局。

<el-header> 是顶部容器。
<el-main> 是主要区域容器。
<el-aside> 是侧边栏容器。
<el-footer> 是底部容器。

除了上述的四个容器组件外，我们还有个外层容器 <el-container>，当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

需要注意的是：el-container 的子元素只能是 el-header、el-main、el-aside、el-footer，而这四个容器的父元素也只能是 el-container。

2. 常见的布局方式

常见的布局方式有七种，我们通过代码例子带大家过一遍这七种布局方式。

2.1 上下布局

上下布局就是头部容器+主要区域容器的布局方式，其结构如下所示：

在 Container.vue 文件中的写入以下代码。

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

<script>
  export default {};
</script>

<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 260px;
  }
  .el-container {
    width: 50%;
  }
</style>

使用 npm run serve 运行后，打开 Web 服务可以看到如下效果。

2.2 上中下布局

上中下布局就是头部容器+主要区域容器+底部容器的布局方式，其结构如下所示：

我们对 Container.vue 的代码做如下修改

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {};
</script>

<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 260px;
  }
  .el-footer {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .el-container {
    width: 50%;
  }
</style>

我们可以看到如下效果：

2.3 左右布局

左右布局就是侧边容器+主要区域容器的布局方式，其结构如下所示：

我们对 Container.vue 文件做如下修改：

<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

<script>
  export default {};
</script>

<style>
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 260px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
  .el-container {
    width: 50%;
  }
</style>

显示效果如下所示：

细心的同学可能发现了，上面代码中，我在 <el-aside> 标签上写了 width 属性来设置该容器的宽度，为什么不直接写在选择器里呢？🤔

尝试把宽度放到选择器中的同学们可能发现了，侧边区域框会有一个宽度，但是这个宽度并非我们设置的值，如果你把 width 属性删除，会发现也有一个相同的宽度，这是为什么呢？

这与 <el-aside> 组件的源码有关，在源码中给 el-aside 组件设置了默认宽度为 300px，若没有设置宽度或者优先级低于默认值的优先级时，都会是使用 width 属性的默认值。

所以，同学们请记住，想要改变 el-aside 容器的宽度一定要使用行内样式。

2.4 上-下（左右）布局

上-下（左右）布局，就是顶栏容器为上部分，侧边栏容器和主要区域容器为下部分，其结构如下所示：

我们对 Container.vue 文件做如下修改：


<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {};
</script>

<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
  #app {
    width: 50%;
  }
</style>

显示效果如下所示：

2.5 上-下（左右（上下））布局

上-下（左右（上下）布局，语言不好描述，我们直接看图吧！

我们对 Container.vue 文件做如下修改：

<template>
  <div class="container">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: "Container",
  };
</script>
<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
  .el-footer {
    background-color: #1c0c5b;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
</style>

显示效果如下所示：

2.6 左右（上下）布局

左右（上下）布局的结构如下图所示：

我们对 Container.vue 文件做如下修改：

<template>
  <div class="container">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: "Container",
  };
</script>
<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
</style>

显示效果如下所示：

2.7 左-右（上中下）布局

左-右（上中下）布局结构如下图所示：

我们对 Container.vue 文件做如下修改：

<template>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>
<script>
  export default {
    name: "Container",
  };
</script>
<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
  .el-footer {
    background-color: #1c0c5b;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
</style>

显示效果如下所示：

ok，以上就是我们 Container 容器的全部内容，接下来我们学习 Layout 布局。

3. Layout布局

当我们拿到一个 PC 端页面的设计稿时，往往会发现页面的布局有一定的规律：行与行之间会以某种方式对齐。比如，Element UI 官网的 Header 部分，其内部又可划分为如下图所示的几个模块。

对于这样的设计，我们可以使用 Element UI 提供的栅格布局来实现。

学过 Bootstrap 的同学，对栅格布局应该不会陌生，整个布局包括行和列，Bootstrap 会把屏幕分成 12 列，我们通过 CSS 样式可以设置每一列的占比。

而在 Element UI 中也提供了类似 Bootstrap 的栅格布局，那它是如何实现的呢？快点击下一步 👇，揭晓答案吧！

3.1 基础布局

首先，新建 elementui-container/src/views/Layout.vue 文件，该文件用来写我们的 Layout 布局代码。

然后，我们对 App.vue 文件做如下修改：

<template>
  <div id="app">
    <Layout />
  </div>
</template>

<script>
  import Layout from "./views/Layout.vue";
  export default {
    name: "App",
    components: {
      Layout,
    },
  };
</script>

<style></style>

准备工作做好了，那我们正式进入 Layout 的学习吧！

Layout 布局把屏幕分成 24 列，也就是说每一行可以分成 24 等份。在 Element UI 中，用 <el-row> 组件代表行，用 <el-col> 组件代表列，如下图所示。

如果想要设置 <el-col> 的占比，使用它的 :span 属性来制定所占份数就好了，这样我们就可以自由地组合布局了。

话不多说，我们直接看例子吧！

在 Layout.vue 文件中添加以下内容。

<template>
  <div>
    <el-row>
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="7"><div class="grid-content bg3">3</div></el-col>
      <el-col :span="8"><div class="grid-content bg4">4</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="1"><div class="grid-content bg4">1</div></el-col>
      <el-col :span="2"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="3"><div class="grid-content bg3">3</div></el-col>
      <el-col :span="4"><div class="grid-content bg1">4</div></el-col>
      <el-col :span="14"><div class="grid-content bg5">5</div></el-col>
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .bg5 {
    background: #b8dfb8;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
</style>

显示效果如下所示：

代码说明如下：

在第一行 <el-row> 组件里，一共分成了四列，第一列 1 占 4 份，第二列 2 占 5 份，第三列 3 占 7 份，第四列 4 占 8 份。总宽度为 24 份，每一列指定 span 份就是占总宽度的 span/24。
在第二行 <el-row> 组件里，一共分成了五列，第一列 1 占 1 份，第二列 2 占 2 份，第三列 3 占 3 份，第四列 4 占 14 份，总宽度为 24 份。

接下来，我们看一看分栏间隔的用法～

3.2 分栏间隔

对于栅格布局来说，我们可能会有这样一个需要，就是列与列之间有一定的间隔间隙，故在 <el-row> 组件里提供了 gutter 属性来指定每一列之间的间隔。

<el-row> 与需要设置间隔的列是父子关系。

gutter 属性的使用格式如下所示：

<el-row :gutter="像素值"> ... </el-row>

我们来举个例子，修改 Layout.vue 文件中的代码：

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="7"><div class="grid-content bg3">3</div></el-col>
      <el-col :span="8"><div class="grid-content bg4">4</div></el-col>
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
</style>

显示效果如下所示：

在上面代码中，使用 <el-row :gutter="10"> 设置列与列之间的间隔为 10 个像素点。

3.3 分栏偏移

分栏偏移就是我们可以指定某列的偏移，由于作用域是列，所以 Element UI 给 el-col 组件提供了 offset 属性来设置列的偏移栏数。

offset 属性的使用格式如下所示：

<el-col :offset="偏移栏数"></el-col>

我们来举个例子，修改 Layout.vue 文件中的代码：

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4" :offset="7"
        ><div class="grid-content bg1">1</div></el-col
      >
      <el-col :span="5" :offset="8"
        ><div class="grid-content bg2">2</div></el-col
      >
      <el-col :span="7" :offset="2"
        ><div class="grid-content bg3">3</div></el-col
      >
      <el-col :span="8" :offset="5"
        ><div class="grid-content bg4">4</div></el-col
      >
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
</style>

显示效果如下所示：

代码说明如下：

第一列 <el-col :span="4" :offset="7"> 占 4 份，其偏移栏数为 7。
第二列 <el-col :span="5" :offset="8"> 占 5 份，其偏移栏数为 8。
第三列 <el-col :span="7" :offset="2"> 占 7 份，其偏移栏数为 2。
第四列 <el-col :span="8" :offset="5"> 占 8 份，其偏移栏数为 5。

3.4 对齐方式

当一行分栏的总占比没有达到 24 份的时候，我们可以通过使用 flex 布局让分栏灵活对齐。

对于不同的对齐方式，flex 布局提供了 justify 属性来指定 start、center、end、space-between、space-around 其中的属性值来设置元素的排版方式，具体如下表所示：

由于对齐方式的作用域是行，所以我们给 <el-row> 组件添加 type 和 justify 属性，其使用格式如下所示：

<el-row type="flex" justify="start/center/end..."> ... </el-row>

我们来举个例子，修改 Layout.vue 文件中的代码：

<template>
  <div>
    <el-row type="flex" justify="start">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
  .el-row {
    background: #f3f1f5;
    margin-top: 10px;
  }
</style>

显示效果如下所示：

3.5 响应式布局

Element UI 参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：

xs：特小，手机端。
sm：小于浏览器一半的宽度。
md：浏览器一半宽度左右。
lg：接近浏览器全屏宽度。
xl：浏览器全屏宽度。

这五个响应尺寸的默认值为 24，也就是说，任何一个尺寸属性不设置，则该尺寸下的响应式宽度为 24。

响应尺寸属性的使用格式如下所示：

<el-col
  :xs="占比份数"
  :sm="占比份数"
  :md="占比份数"
  :lg="占比份数"
  :xl="占比份数"
></el-col>

我们来举个例子，修改 Layout.vue 文件中的代码：

<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="9" :sm="6" :md="4" :lg="3" :xl="2"
        ><div class="grid-content bg1">1</div></el-col
      >
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="10"
        ><div class="grid-content bg4">2</div></el-col
      >
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
        ><div class="grid-content bg2">3</div></el-col
      >
      <el-col :xs="7" :sm="6" :md="4" :lg="3" :xl="1"
        ><div class="grid-content bg3">4</div></el-col
      >
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
  .el-row {
    background: #f3f1f5;
    margin-top: 10px;
  }
</style>

显示效果如下所示：

在上面代码中，我们可以看出四列里，每一个相应尺寸属性总占比都为 24。

三. 基础组件

1. Icon图标

我们在平时的开发中，通常会用到一些小图标，Element UI 为我们提供了一系列 UI 层面设计常用的 Icon 图标集合，如下图所示：

从上图可以看到大部分都是我们日常会用到的图标，基本上可以满足我们的开发需求。

那么我们怎么使用这些图标呢？🤔

很简单，直接通过设置类名为 el-icon-iconName 来使用即可，例如我们设置一个删除图标，通过 标签的 class 属性引入对应图标的类名就可以了。

代码如下：

<i class="el-icon-delete"></i>

我们去代码中体验一下其实现过程。

新建一个 views/Icon.vue 文件，然后对 App.vue 做如下修改。

<template> <div id="app"> <Icon /> </div> </template> <script> import Icon from "./views/Icon.vue"; export default { name: "App", components: { Icon, }, }; </script> <style></style>

在 src/views/Icon.vue 文件中写入以下内容。

<template> <el-row> <el-col :span="3"> <i class="el-icon-user-solid">联系人</i> </el-col> <el-col :span="3"> <i class="el-icon-phone">通话记录</i> </el-col> <el-col :span="3"> <i class="el-icon-zoom-in">搜索</i> </el-col> <el-col :span="3"> <i class="el-icon-camera-solid">照相机</i> </el-col> </el-row> </template> <script></script> <style></style>

打开 Web 服务，显示如下：

代码说明如下：

我们定义了一个一行四列布局，每列均占 3/24。

在每一列中，都使用 class 属性添加了一个 Icon 图标。

需要注意的是：我们的图标是可以设置颜色的，但最好不要在公用的 class 中定义颜色。因为使用公用的 class 自定义颜色，可能会出现颜色不一致的情况。

那么我们怎么去改变图标的颜色呢？🤔

同学们先看看下面的动图演示。👇

同学们看到变化了吗？

通过上面的图片展示，相信大家已经看出来，使用 color 属性可以去设置小图标的颜色。

明白了之后，那我们去给页面上这四个图标加点颜色吧！😏

对 Icon.vue 文件做如下修改：

<template> <el-row> <el-col :span="3"> <i class="el-icon-user-solid" style="color:#f6a9a9">联系人</i> </el-col> <el-col :span="3"> <i class="el-icon-phone" style="color:#ffbf86">通话记录</i> </el-col> <el-col :span="3"> <i class="el-icon-zoom-in" style="color:#fff47d">搜索</i> </el-col> <el-col :span="3"> <i class="el-icon-camera-solid" style="color:#c2f784">照相机</i> </el-col> </el-row> </template> <script></script> <style></style>

可以看到图标变得五彩缤纷了。

Icon 图标的使用就为大家讲到这里，接下来我们学习 bottun 按钮。

2. Button按钮

按钮是非常常用的组件，想一想我们在一个网站上进行登录或者注册时，一般会看到提交按钮、重置按钮、登录按钮、注册按钮等等，例如蓝桥云课的登录页面：

基本用法

Element UI 给我们提供了 Button 按钮组件，通过使用 <el-button> 组件来设置按钮，并提供了 type、plain、round、circle 四个属性来定义 Button 的样式，详情如下表所示：

其使用格式如下所示：

 <el-button type="primary/success/info/warning/danger"></el-button>  <el-button plain></el-button>  <el-button round></el-button>  <el-button circle></el-button>

那我们来看看这些属性的显示效果吧～

新建一个 views/Button.vue 文件，对 App.vue 文件做如下修改。

<template> <div id="app"> <button /> </div> </template> <script> import Button from "./views/Button.vue"; export default { name: "App", components: { Button, }, }; </script> <style></style>

我们在 Button.vue 文件中，写入默认按钮相关属性。

<template> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template> <script></script> <style></style>

效果如下图所示：

我们给上面的代码添加 plain 属性，对 Button.vue 文件做如下修改。

<template> <el-row> <el-button plain>朴素按钮</el-button> <el-button type="primary" plain>主要按钮</el-button> <el-button type="success" plain>成功按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>警告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button> </el-row> </template> <script></script> <style></style>

效果如下所示：

我们给按钮添加 round 属性，对 Button.vue 文件做如下修改。

<template> <el-row> <el-button round>朴素按钮</el-button> <el-button type="primary" round>主要按钮</el-button> <el-button type="success" round>成功按钮</el-button> <el-button type="info" round>信息按钮</el-button> <el-button type="warning" round>警告按钮</el-button> <el-button type="danger" round>危险按钮</el-button> </el-row> </template> <script></script> <style></style>

效果如下所示：

我们来看看图标按钮的使用，对 Button.vue 文件做如下修改。

<template> <el-row> <el-button icon="el-icon-loading" circle></el-button> <el-button type="primary" icon="el-icon-position" circle></el-button> <el-button type="success" icon="el-icon-chat-dot-round" circle></el-button> <el-button type="info" icon="el-icon-picture-outline" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row> </template> <script></script> <style></style>

显示效果如下：

文字按钮

type 属性除了上述四种属性值外，它还有一个 text 属性值，可以用来设置没有边框和背景颜色的按钮。

其使用格式如下所示：

<el-button type="text"></el-button>

我们来看个例子。

在 Button.vue 文件中写入以下内容。

<template> <el-row> <el-button type="text">首页</el-button> <el-button type="text">科幻</el-button> <el-button type="text">童书</el-button> <el-button type="text">历史</el-button>  <el-button type="text" disabled>更多</el-button> </el-row> </template> <script></script> <style></style>

显示效果如下：

在上面代码中，我们给最后一个按钮添加了 disabled 属性，一旦给按钮添加了该属性，此按钮就是不可用的状态。

按钮组

有些时候，我们可能会在页面上看到如下所示的按钮组。

在 Element UI 中为我们提供了 <el-button-group> 标签来嵌套你的按钮，使其成为一组。

其使用格式如下所示：

<el-button-group> <el-button></el-button> </el-button-group>

我们来看个例子～

在 Button.vue 文件中写入以下内容。

<template> <el-row> <el-button-group> <el-button icon="el-icon-plus"></el-button> <el-button icon="el-icon-minus"></el-button> <el-button icon="el-icon-download"></el-button>  <el-button type="primary" :loading="true">加载中</el-button> </el-button-group> <el-button-group> <el-button icon="el-icon-d-arrow-left" type="primary">上一页</el-button> <el-button type="primary"> 下一页 <i class="el-icon-d-arrow-right"></i> </el-button> </el-button-group> </el-row> </template> <script></script> <style> .el-button-group { margin-left: 20px; } </style>

显示效果如下所示：

在上面代码中，给第一组按钮中的第四个按钮添加了 loading 属性，用来给按钮设置 loading 状态。当 loading 属性为 true 时，按钮前面会有一个一直转动的圈圈，若为 false 就是普通按钮了。

不同尺寸的按钮

同学们可能有疑问了，到现在为止我们的按钮都是默认的大小，那如果我们想调整按钮的大小该怎么办呢？🤔

Element UI 为我们提供了 size 属性来设置按钮的大小，它有三个属性值，详情如下表所示：

我们来看看效果～

在 Button.vue 文件中写入以下内容。

<template> <el-row> <el-button>默认按钮</el-button> <el-button size="medium" type="info">中等按钮</el-button> <el-button size="small" type="info">小型按钮</el-button> <el-button size="mini" type="info">超小按钮</el-button> </el-row> </template> <script></script> <style></style>

显示效果如下所示：

ok，Button 按钮就讲到这里，下面给大家介绍 Link 文字链接。

3. Link文字链接

Link 文字链接相当于是渲染好的标签。

在 Element UI 中为我们提供了 <el-link> 组件来表示文字链接，它所拥有的属性和标签一样。

其使用格式如下所示：

<el-link href="链接 URL" target="_blank/_self/_parent/_top"></el-link>

target 属性取值，详情如下表所示：

在按钮中所讲到的 type 属性同样可以用在 <el-link> 组件中，用来表示不同状态下的链接。

我们来看个例子～

新建一个 src/vies/Link.vue 文件，并对 App.vue 文件做如下修改。

<template> <div id="app"> <link /> </div> </template> <script> import Link from "./views/Link.vue"; export default { name: "App", components: { Link, }, }; </script> <style></style>

在 Link.vue 文件中写入以下代码：

<template> <div> <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link> <el-link type="primary">主要链接</el-link> <el-link type="success">成功链接</el-link> <el-link type="warning">警告链接</el-link> <el-link type="danger">危险链接</el-link> <el-link type="info">信息链接</el-link> </div> </template> <script></script> <style> .el-link { margin-left: 10px; } </style>

显示效果如下所示：

除了上述基础用法，<el-link> 组件还有 disabled 属性（用于设置禁用状态）、underline 属性（用于设置有无下划线）。

我们对 Link.vue 文件做如下修改：

<template> <div> <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>  <el-link type="primary" :underline="false">主要链接</el-link> <el-link type="success" :underline="false">成功链接</el-link> <el-link type="warning" :underline="false">警告链接</el-link>  <el-link type="danger" disabled>危险链接</el-link> <el-link type="info" :underline="false">信息链接</el-link> </div> </template> <script></script> <style> .el-link { margin-left: 10px; } </style>

显示效果如下所示：

我们还可以给文字链接加上 Icon 图标，有以下两种使用方式：

 <el-link icon=""></el-link>  <el-link><i class=""></i></el-link>

我们来举个例子～

在 Link.vue 文件中写入以下内容：

<template> <div> 欢迎来到<el-link icon="el-icon-school" type="primary" :underline="false" >蓝桥云课</el-link >，请点击<el-link>此处<i class="el-icon-bottom"></i>，进入学习吧！</el-link> </div> </template> <script></script> <style> .el-link { margin-left: 10px; font-size: 17px; } </style>

显示效果如下所示：

ok，基础组件中最常用的三大块知识就讲到这里，另外还有 Color、Typography、Border 这三种，内容很简单，感兴趣的同学请自行阅读官方文档。