首页

# Layout 布局 和 Container 布局容器

知识点

  • Container 布局容器
  • Layout 布局

# Container 布局容器

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

1678274495823

从上图可以看出，官网的布局可以分成四个容器，顶部容器、主要内容区域容器、侧边容器、底栏容器。在 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 的步骤，创建一个名为 elementui-container 的 Vue + Element UI 的项目。

本节实验的内容都会在该项目文件中完成。

创建好之后，我们对文件结构进行以下修改～

首先，我们删掉 elementui-container/src/components 中的 HelloWorld.vue 文件，并把 App.vue 文件中不需要的代码删除掉，删除后的文件如下所示：

<!--App.vue-->
<template>
  <div id="app"></div>
</template>
<script>
  export default {
    name: "App",
  };
</script>
<style></style>
然后，创建 elementui-container/src/views/Container.vue 文件，该文件用来写我们的布局容器相关代码。
最后，我们在 App.vue 文件中导入并注册 Container.vue 单文件组件，便于查看页面效果。在 App.vue 文件添加以下代码：
<!--App.vue-->
<template>
  <div id="app">
    <Container />
  </div>
</template>
<script>
  import Container from "./views/Container.vue";
  export default {
    name: "App",
    components: {
      Container,
    },
  };
</script>
<style></style>
准备工作做好了，接下来我们就来学习常见的布局方式吧！
# 常见的布局方式
常见的布局方式有七种，我们通过代码例子带大家过一遍这七种布局方式。
1. 上下布局
上下布局就是头部容器 + 主要区域容器的布局方式，其结构如下所示：
1678284250167
在 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 服务可以看到如下效果。
1678284289977
2. 上中下布局
上中下布局就是头部容器 + 主要区域容器 + 底部容器的布局方式，其结构如下所示：
1678284305169
我们对 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>
我们可以看到如下效果：
1678284332232
3. 左右布局
左右布局就是侧边容器 + 主要区域容器的布局方式，其结构如下所示：
1678284350381
我们对 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>
显示效果如下所示：
1678284379458
细心的同学可能发现了，上面代码中，我在 <el-aside> 标签上写了 width 属性来设置该容器的宽度，为什么不直接写在选择器里呢？🤔
尝试把宽度放到选择器中的同学们可能发现了，侧边区域框会有一个宽度，但是这个宽度并非我们设置的值，如果你把 width 属性删除，会发现也有一个相同的宽度，这是为什么呢？
这与 <el-aside> 组件的源码有关，在源码中给 el-aside 组件设置了默认宽度为 300px，若没有设置宽度或者优先级低于默认值的优先级时，都会是使用 width 属性的默认值。
1678284525867
所以，同学们请记住，想要改变 el-aside 容器的宽度一定要使用行内样式。
4. 上 - 下（左右）布局
上 - 下（左右）布局，就是顶栏容器为上部分，侧边栏容器和主要区域容器为下部分，其结构如下所示：
1678284541225
我们对 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>
显示效果如下所示：
1678284598009
5. 上 - 下（左右（上下））布局
上 - 下（左右（上下）布局，语言不好描述，我们直接看图吧！
1678284615733
我们对 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>
显示效果如下所示：
1678284639518
6. 左右（上下）布局
左右（上下）布局的结构如下图所示：
1678284917012
我们对 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>
显示效果如下所示：
1678284947570
7. 左 - 右（上中下）布局
左 - 右（上中下）布局结构如下图所示：
1678284980006
我们对 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>
显示效果如下所示：
1678285008799
ok，以上就是我们 Container 容器的全部内容，接下来我们学习 Layout 布局。
# Layout 布局
当我们拿到一个 PC 端页面的设计稿时，往往会发现页面的布局有一定的规律：行与行之间会以某种方式对齐。比如，Element UI 官网的 Header 部分，其内部又可划分为如下图所示的几个模块。
对于这样的设计，我们可以使用 Element UI 提供的栅格布局来实现。
学过 Bootstrap 的同学，对栅格布局应该不会陌生，整个布局包括行和列，Bootstrap 会把屏幕分成 12 列，我们通过 CSS 样式可以设置每一列的占比。
而在 Element UI 中也提供了类似 Bootstrap 的栅格布局，那它是如何实现的呢？快点击下一步 👇，揭晓答案吧！
# 基础布局
首先，新建 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> 组件代表列，如下图所示。
1678285223183
如果想要设置 <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>
显示效果如下所示：
1678285265454
代码说明如下：
  • 在第一行 <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 份。
# 分栏间隔
对于栅格布局来说，我们可能会有这样一个需要，就是列与列之间有一定的间隔间隙，故在 <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>
显示效果如下所示：
1678285370474
在上面代码中，使用 <el-row :gutter="10"> 设置列与列之间的间隔为 10 个像素点。
# 分栏偏移
分栏偏移就是我们可以指定某列的偏移，由于作用域是列，所以 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>
显示效果如下所示：
1678285503421
代码说明如下：
  • 第一列 <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。
# 对齐方式
当一行分栏的总占比没有达到 24 份的时候，我们可以通过使用 flex 布局让分栏灵活对齐。
对于不同的对齐方式， flex 布局提供了 justify 属性来指定 start、center、end、space-between、space-around 其中的属性值来设置元素的排版方式，具体如下表所示：
属性值说明
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>
显示效果如下所示：
1678285628879
# 响应式布局
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>
显示效果如下所示：
1678285663308
在上面代码中，我们可以看出四列里，每一个相应尺寸属性总占比都为 24。
1678285673897
以上就是本节实验的所有内容，同学们学会了吗
# 实验总结
本节实验我们学习了 Layout 布局和 Container 布局容器。
这里我们来总结一下，这两类布局组件的区别～
Layout 布局组件应用于局部布局，而 Container 布局容器应用于整体布局。
ok，布局容器我们就学完了，现在有了一个全局观，我们该去细化每一部分了。
# 基础组件
在前面的实验中，我们学习了布局相关的组件。现在我们会布局了，那是时候往里面填充内容了。
本节实验就为大家讲解常用的三种基本组件，分别是 Icon 图标、Button、Link 文字链接。
获取本节实验初始项目：
wget https://labfile.oss.aliyuncs.com/courses/5246/elementui.zip && unzip elementui.zip
快进入实验学习吧～
# 知识点
  • Icon
  • Button
  • Link
# Icon 图标
我们在平时的开发中，通常会用到一些小图标，Element UI 为我们提供了一系列 UI 层面设计常用的 Icon 图标集合，如下图所示：
1678285889321
从上图可以看到大部分都是我们日常会用到的图标，基本上可以满足我们的开发需求。
那么我们怎么使用这些图标呢？🤔
很简单，直接通过设置类名为 el-icon-iconName 来使用即可，例如我们设置一个删除图标，通过 <i> 标签的 class 属性引入对应图标的类名就可以了。
1678285904268
代码如下：
<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 服务 ，显示如下：
1678285942013
代码说明如下：
  • 我们定义了一个一行四列布局，每列均占 3/24。
  • 在每一列中，都使用 class 属性添加了一个 Icon 图标。
（疑问，上面总共的占比是 12）
需要注意的是：我们的图标是可以设置颜色的，但最好不要在公用的 class 中定义颜色。因为使用公用的 class 自定义颜色，可能会出现颜色不一致的情况。
那么我们怎么去改变图标的颜色呢？
先看看下面的动图演示
1678286340371
1678286354396
通过上面的图片展示，相信大家已经看出来，使用 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>
可以看到图标变得五彩缤纷了。
1678286383351
Icon 图标的使用就为大家讲到这里，接下来我们学习 bottun 按钮。
# Button 按钮
按钮是非常常用的组件，想一想我们在一个网站上进行登录或者注册时，一般会看到提交按钮、重置按钮、登录按钮、注册按钮等等，例如蓝桥云课的登录页面：
1678286437158
# 基本用法
Element UI 给我们提供了 Button 按钮组件，通过使用 <el-button> 组件来设置按钮，并提供了 type 、 plain 、 round 、 circle 四个属性来定义 Button 的样式，详情如下表所示：
属性说明
typetype 属性用来设置按钮的类型，不同类型的按钮，会呈现不一样的颜色，它有 5 个属性值，分别是 primary （蓝色）、 success （绿色）、 info （灰色）、 warning （橙色）、 danger （红色）。
plainplain 属性用来设置朴素按钮，按钮颜色会比默认按钮的颜色浅一点。
roundround 属性用来设置圆角按钮。
circlecircle 属性用来设置圆形按钮，一般用于 Icon 图标按钮。
其使用格式如下所示：
<!-- 默认按钮 -->
<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>
效果如下图所示：
1678286563471
我们给上面的代码添加 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>
效果如下所示：
1678286581481
我们给按钮添加 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>
效果如下所示：
1678286594917
我们来看看图标按钮的使用，对 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>
显示效果如下：
1678286629370
# 文字按钮
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>
    <!--disabled 属性，表示该按钮禁止使用 -->
    <el-button type="text" disabled>更多</el-button>
  </el-row>
</template>
<script></script>
<style></style>
显示效果如下：
1678286686889
在上面代码中，我们给最后一个按钮添加了 disabled 属性，一旦给按钮添加了该属性，此按钮就是不可用的状态。
# 按钮组
有些时候，我们可能会在页面上看到如下所示的按钮组。
1678286708593
在 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>
      <!--:loading="true" 表示该按钮处于 loading 状态 -->
      <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>
显示效果如下所示：
1678286728417
在上面代码中，给第一组按钮中的第四个按钮添加了 loading 属性，用来给按钮设置 loading 状态。当 loading 属性为 true 时，按钮前面会有一个一直转动的圈圈，若为 false 就是普通按钮了。
1678286741281
# 不同尺寸的按钮
Element UI 为我们提供了 size 属性来设置按钮的大小，它有三个属性值，详情如下表所示：
属性值说明
mini超小按钮。
small小型按钮。
medium中等按钮。
我们来看看效果～
在 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>
显示效果如下所示：
1678287039844
Link 文字链接相当于是渲染好的 <a> 标签。
在 Element UI 中为我们提供了 <el-link> 组件来表示文字链接，它所拥有的属性和 <a> 标签一样。
其使用格式如下所示：
<el-link href="链接 URL" target="_blank/_self/_parent/_top"></el-link>
target 属性取值，详情如下表所示：
属性值说明
_blank在新窗口打开被链接文档。
_self在相同的框架中打开链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。
在按钮中所讲到的 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>
显示效果如下所示：
1678287163805
除了上述基础用法， <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>
显示效果如下所示：
1678287218027
我们还可以给文字链接加上 Icon 图标，有以下两种使用方式：
<!--Icon 图标显示在文字前面 -->
<el-link icon=""></el-link>
<!--Icon 图标可显示在文字前面，也可以显示在文字后面 -->
<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>
显示效果如下所示：
1678287271721
ok，基础组件中最常用的三大块知识就讲到这里，另外还有 Color、Typography、Border 这三种，内容很简单，感兴趣的同学请自行阅读官方文档。
# 练习题
请根据如下效果图来实现代码吧！
1678287346053
<template>
  <el-row type="flex" justify="center">
    <el-col :span="3" class="title">
      <b>蓝桥水果市场</b>
    </el-col>
    <el-col :span="10">
      <el-link class="el-icon-s-home">主页</el-link>
      <el-link class="el-icon-cherry" type="primary">水果分类</el-link>
      <el-link class="el-icon-star-on">个人收藏</el-link>
      <el-link> <i class="el-icon-user-solid"></i> 个人设置 </el-link>
      <el-link class="el-icon-more">更多</el-link>
    </el-col>
    <el-col :span="5">
      <el-button icon="el-icon-upload" type="primary" size="mini"
        >登录</el-button
      >
      <el-button size="mini"> <i class="el-icon-edit"></i> 注册 </el-button>
    </el-col>
  </el-row>
</template>
<script>
  export default {};
</script>
<style>
  .el-row {
    margin: 5%;
  }
  .title {
    color: #409eff;
    font-size: 20px;
  }
  .el-icon-cherry,
  .el-icon-user-solid,
  .el-icon-star-on,
  .el-icon-more {
    margin-left: 40px;
  }
</style>
# 表单组件
本节实验为大家讲解表单相关的组件。
获取本节实验初始项目：
wget https://labfile.oss.aliyuncs.com/courses/5246/elementui.zip && unzip elementui.zip
知识点
  • Radio 单选框
  • Checkbox 多选框
  • Input 输入框
  • Select 选择器
  • Switch 开关
  • DatePicker 日期选择器
  • Upload 上传
  • Form 表单
# Radio 单选框
单选框就是提供给你几个选项，你只能选择其中一个。我们在调查问卷、心理测试题等页面经常可以看到类似的单选框选项。比如，下图的调查问卷：
1678287611570
# 基础用法
在 Element UI 中提供了 <el-radio> 标签来设置单选框。
那我们来试一试吧～
新建一个 src/views/Radio.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Radio />
  </div>
</template>
<script>
  import Radio from "./views/Radio.vue";
  export default {
    name: "App",
    components: {
      Radio,
    },
  };
</script>
<style></style>
我们在 Radio.vue 文件中写入 Radio 组件。
<template>
  <div>
    <el-radio>男</el-radio>
    <el-radio>女</el-radio>
  </div>
</template>
<script></script>
<style></style>
效果显示如下：
1678287656049
同学们会发现，两个单选按钮默认都被选中了，并且点击按钮没有任何反应。明明是单选按钮怎么会这样呢
要解开谜团，我们需要看看 <el-radio> 的相关属性，Radio 组件有如下表所示的六个属性。
参数说明类型可选值默认值
value/v-model绑定值string/number/boolean无无
labelRadio 的 valuestring/number/boolean无无
disabled是否禁用boolean无false
border是否显示边框boolean无false
sizeRadio 的尺寸，仅在 border 为真时有效stringmedium/small/mini无
name原生 name 属性string无无
在上表中， label 属性是用来决定 Radio 组件的 value 属性值，这里所说的 value 属性是指 HTML 中的 value 值，如下所示。
<input type="radio" value="male" />
ok，那我们在 Radio.vue 中添加 label 属性值吧！
<template>
  <div>
    <el-radio label="男">男</el-radio>
    <el-radio label="女">女</el-radio>
  </div>
</template>
<script></script>
<style></style>
显示效果如下：
1678287706632
同学们可以发现，加上 label 属性之后，单选框的两个选项均未被选中，并且当你去点其中一个按钮也不能被选中。
因为呀， label 属性必须配合 v-model 指令去使用才会具有选中的效果。我们都知道 v-model 指令是 Vue.js 用来做数据双向绑定的，如果 label 的值与 v-model 的值相同，则对应的按钮为选中状态。
那我们在 Radio.vue 中去使用一下 v-model 吧。
template>
    <div>
        <el-radio v-model="radio" label="男">男</el-radio>
        <el-radio v-model="radio" label="女">女</el-radio>
    </div>
</template>
<script>
 export default {
    data () {
      return {
        radio: '男'
      };
    }
  }
</script>
<style>
</style>
现在单选框的效果就实现了～
1678287763490
代码说明如下：
  • 首先，我们给两个 <el-radio> 标签设置 v-model 绑定变量 radio 。
  • 然后，使用 data(){return{radio:'男'}} 来取当前组件中 radio 为‘男’的属性值。
  • 当我们组件中的值与设置的 radio 值相同，则该值就会被选中。
注意：在使用单选按钮时， label 属性和 v-model 属性是必不可少的。
上面的 label 是写死的，如果是得到的变量的值，则要写成 :label
# 禁用状态
在上面的属性表中，第三个属性是 disabled ，加上该属性后，单选框处于不可选的状态。
我们来举个例子～
对 Radio.vue 文件做如下修改。
对 Radio.vue 文件做如下修改。
<template>
  <div>
    <el-radio disabled v-model="radio" label="男">男</el-radio>
    <el-radio disabled v-model="radio" label="女">女</el-radio>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        radio: "男",
      };
    },
  };
</script>
<style></style>
可以看到两个按钮已经禁用了。
1678288303272
# 带有边框的属性
上表中第四个属性 border 可以渲染带有边框的单选框。
我们来举个例子～
对 Radio.vue 文件做如下修改：
<template>
  <div>
    <el-radio v-model="radio" label="男" border>男</el-radio>
    <el-radio v-model="radio" label="女" border>女</el-radio>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        radio: "男",
      };
    },
  };
</script>
<style></style>
显示效果如下所示：
1678288330244
我们还可以添加 size 属性来设置 Radio 组件的大小，它有三个可选值（medium/small/mini）。我们对 Radio.vue 文件做如下修改：
<template>
  <div>
    <!-- 默认大小选项框 -->
    <el-radio v-model="radio" label="阅读" border>阅读</el-radio>
    <!-- 中等大小选项框 -->
    <el-radio v-model="radio" label="画画" border size="medium">画画</el-radio>
    <!-- 小型选项框 -->
    <el-radio v-model="radio" label="旅游" border size="small">旅游</el-radio>
    <!-- 超小型选项框 -->
    <el-radio v-model="radio" label="编程" border size="mini">编程</el-radio>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        radio: "阅读",
      };
    },
  };
</script>
<style></style>
可以看到按钮的大小改变了。
1678288357245
注意，只有 border 属性存在时，才可以使用 size 属性。
# Radio 组件的事件
在 Radio 组件中有一个 change 事件，是当指定值发生变化时触发的事件，也就是说如果添加了 change 事件，双向绑定中的值会随着你所选择的选项值而改变。
其使用格式如下所示：
<el-radio @change="事件处理函数"></el-radio>
注意，这里的事件处理函数一定是绑定在 Vue 上的函数。
我们来举个例子～
对 Radio.vue 文件做如下修改：
<template>
  <div>
    <el-radio v-model="radio" label="男" @change="changeGender">男</el-radio>
    <el-radio v-model="radio" label="女" @change="changeGender">女</el-radio>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        radio: "男",
      };
    },
    methods: {
      changeGender() {
        console.log(this.radio);
      },
    },
  };
</script>
<style></style>
可以看到控制台会打印出你当前选项的值。
1678288465781
代码说明：
  • 我们给两个 <el-radio> 绑定了名为 changeGender 的函数。
  • 通过 methods:{changeGender(){console.log(this.radio)}} 来实现 changeGender 函数，其函数内部的实现为：在控制台输出当前选项的值。
# 单选框组
结合 el-radio-group 元素和子元素 el-radio 可以实现单选框组。只需要在 el-radio-group 中绑定 v-model ，在 el-radio 中设置好 label 即可 ，无需再给每一个 el-radio 绑定变量。
el-radio-group 的意义在于：只需给 el-radio-group 添加 v-model 指令代替给内部所有 el-radio 都添加的操作。
我们来看个例子～
对 Radio.vue 文件做如下修改：
<template>
  <div>
    <p>你喜欢什么花？</p>
    <el-radio-group v-model="radio">
      <el-radio :label="1">荷花</el-radio>
      <el-radio :label="2">梅花</el-radio>
      <el-radio :label="3">牡丹</el-radio>
    </el-radio-group>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        radio: 2,
      };
    },
  };
</script>
<style></style>
显示效果如下所示：
1678288612694
我们还可以实现按钮样式的单选组合，把 el-radio 元素换成 el-radio-button 元素即可。
我们修改一下 Radio.vue 的代码。
<template>
  <div>
    <p>你喜欢什么花？</p>
    <el-radio-group v-model="radio">
      <el-radio-button label="荷花"></el-radio-button>
      <el-radio-button label="梅花"></el-radio-button>
      <el-radio-button label="牡丹"></el-radio-button>
    </el-radio-group>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        radio: "荷花",
      };
    },
  };
</script>
<style></style>
显示效果如下：
1678288664172
# Checkbox 多选框
多选框就是给你几个选项，你可以选择多个，比如，微博选择你自己的兴趣领域，你可以选择多个兴趣领域。
Element UI 提供了 <el-checkbox> 来实现多选框。
我们来举个例子～
新建一个 src/views/Checkbox.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Checkbox />
  </div>
</template>
<script>
  import Checkbox from "./views/Checkbox.vue";
  export default {
    name: "App",
    components: {
      Checkbox,
    },
  };
</script>
<style></style>
在 Checkbox.vue 文件中，写入以下内容。
<template>
  <div>
    <p>你喜欢什么技术？</p>
    <el-checkbox>JavaScript</el-checkbox>
    <el-checkbox>Vue.js</el-checkbox>
    <el-checkbox>Three.js</el-checkbox>
  </div>
</template>
<script></script>
<style></style>
显示效果如下：
1678288795690
我们也可以使用 v-mode 属性来绑定变量 ，让选项默认为被选中的状态，修改 Checkbox.vue 文件如下：
<template>
  <div>
    <h2>购物车</h2>
    <el-checkbox label="香水" v-model="checked"></el-checkbox>
    <el-checkbox label="包包" v-model="checked"></el-checkbox>
    <el-checkbox label="狗粮" v-model="checked"></el-checkbox>
    <el-checkbox label="靴子" v-model="checked"></el-checkbox>
    <el-checkbox label="裙子" v-model="checked"></el-checkbox>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checked: [],
      };
    },
  };
</script>
<style></style>
显示效果如下所示：
1678288847613
在上面代码中，我们给每个 <el-checkbox> 组件都定义了不同的 value 值，并都绑定了 v-model 属性，当你选择某个 <el-checkbox> 时，其对应的 value 值会放入 checked 数组中。
同样 Checkbox 组件也有 disabled 属性、 border 属性、 size 属性，这些属性的使用方法与原 DOM 标签是相同的 ，我就不再举例子了。
# 多选框组
Element UI 提供了 el-checkbox-group 元素能把多个 Checkbox 管理为一组，只需要在 Group 中使用 v-model 绑定 Array 类型的变量，并给每个 <el-checkbox> 子元素设置 label 属性值即可。
其使用格式为：
<el-checkbox-group v-model="数组类型的变量">
  <el-checkbox label="Checkbox 对应的值"></el-checkbox>
</el-checkbox-group>
我们来举个例子～
对 Checkbox.vue 文件做如下修改：
<template>
  <div>
    <p>你最喜欢哪种动物？</p>
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="猫猫"></el-checkbox>
      <el-checkbox label="兔兔"></el-checkbox>
      <el-checkbox label="狗狗"></el-checkbox>
      <el-checkbox label="猪猪"></el-checkbox>
      <el-checkbox label="其他"></el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checkList: ["猫猫"],
      };
    },
  };
</script>
<style></style>
显示效果如下：
1678288919432
在上面代码中，我们给 <el-checkbox-group> 绑定了名为 checkList 的数组变量，在 checkList 数组中包含数据 “猫猫”，所以对应 label="猫猫" 的 <el-checkbox> 会被勾选。
# 限制勾选的数量
在 Checkbox 组件中提供了 min 和 max 属性来限制勾选的数量， min 属性用于设置最小勾选数量， max 属性用于设置最大勾选数量。
我们修改一下上面的代码，现在我们只允许最多选择两个最喜欢的动物。
<template>
  <div>
    <p>你最喜欢哪种动物？</p>
    <el-checkbox-group v-model="checkList" :min="1" :max="2">
      <el-checkbox label="猫猫"></el-checkbox>
      <el-checkbox label="兔兔"></el-checkbox>
      <el-checkbox label="狗狗"></el-checkbox>
      <el-checkbox label="猪猪"></el-checkbox>
      <el-checkbox label="其他"></el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checkList: ["猫猫", "狗狗"],
      };
    },
  };
</script>
<style></style>
显示效果如下：
1678288959558
我们设置 <el-checkbox-group :min="1" :max="2"> ，表示最少勾选 1 个选项，最多勾选 2 个选项，当我们已经勾选两个选项后，另外三个选项处于禁用状态；当我们只有一个选项被勾选时，被勾选的那个选项处于禁用状态。
# indeterminate 状态
indeterminate 属性用于表示 checkbox 的不确定状态，一般用于实现全选的效果。
1678288982527
那我们举个全选效果的例子，其使用步骤如下所示：
  1. 在 <el-checkbox-group> 之外写一个平级的 <el-checkbox> 用于实现全选的功能，我们需要绑定一个 indeterminate 属性用来设置不确定的状态；还需要绑定一个名为 handleCheckAllChange 的事件，用于判断当前值是否选中该按钮；添加一个 v-model 属性用于判断当前选项是否全部被选中。
  2. 在 <el-chackbox-group> 上绑定一个名为 handleCheckedAnimalChange 的事件，用来记录当前选项的个数。
我们对 Checkbox.vue 文件做如下修改：
<template>
  <div>
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group
      v-model="checkedAnimal"
      @change="handleCheckedAnimalChange"
    >
      <el-checkbox v-for="animal in animals" :label="animal" :key="animal"
        ></el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>
<script>
  const animalOptions = ["猫猫", "兔兔", "狗狗", "猪猪"];
  export default {
    data() {
      return {
        checkAll: false,
        checkedAnimal: ["猫猫", "猪猪"],
        animals: animalOptions,
        isIndeterminate: true,
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedAnimal = val ? animalOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedAnimalChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.animals.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.animals.length;
      },
    },
  };
</script>
<style></style>
显示效果如下所示：
1678289032390
# Input 输入框
Element UI 提供了 <el-input> 用于创建鼠标或者键盘输入字符的输入框。
我们直接举例来看看它的基本用法。
新建一个 src/views/Input.vue 文件，并对 App.vue 文件做如下修改：
<template>
  <div id="app">
    <input />
  </div>
</template>
<script>
  import Input from "./views/Input.vue";
  export default {
    name: "App",
    components: {
      Input,
    },
  };
</script>
<style></style>
我们在 App.vue 文件中创建 Input 组件，代码如下所示：
<template>
  <!--placeholder 属性用于设置输入提示语 -->
  <el-input v-model="input" placeholder="请输入你的名字"></el-input>
</template>
<script>
  export default {
    data() {
      return {
        input: "李小花", // 输入框默认输入
      };
    },
  };
</script>
<style>
  .el-input {
    width: 20%; /* 设置输入框的宽度，默认是屏幕宽度 */
  }
</style>
显示效果如下：
1678409623203
# 密码框
Input 组件提供了 show-password 属性用于设置一个可以切换显示隐藏的密码框。
其使用格式如下：
<el-input show-password></el-input>
对 Input.vue 文件做如下修改：
<template>
  <el-input
    v-model="input"
    placeholder="请输入你的密码"
    show-password
  ></el-input>
</template>
<script>
  export default {
    data() {
      return {
        input: "123456",
      };
    },
  };
</script>
<style>
  .el-input {
    width: 20%;
  }
</style>
显示效果如下：
我们还可以给输入框中输入的字符设置输入最大和最小长度，并且加上 Icon 图标，相关属性如下表所示：
属性说明类型可选值默认值
maxlength原生属性，最大输入长度number无无
minlength原生属性，最小输入长度number无无
prefix-icon输入框头部图标string无无
suffix-icon输入框尾部图标string无无
我们来举个例子～
对 Input.vue 文件做如下修改：
<template>
  <div>
    <el-input
      v-model="name"
      placeholder="请输入你的用户名"
      prefix-icon="el-icon-user"
    >
    </el-input>
    <el-input
      v-model="password"
      placeholder="请输入你的密码"
      maxlength="6"
      show-password
      prefix-icon="el-icon-key"
    >
    </el-input>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        name: "",
        password: "",
      };
    },
  };
</script>
<style>
  .el-input {
    width: 20%;
    display: block;
    margin: 10px;
  }
</style>
显示效果如下所示：
1678409792885
在上面代码中，我们给两个输入框设置了输入框头部图标，并给密码输入框设置最大输入长度为 6，所以当我们在密码输入框键入 6 个字符后，就无法输入了。
# 文本域
像平时我们写文章评论，会用到文本域，Input 组件提供了 type 属性可用来指定该输入框为文本域。
使用格式如下所示：
<el-input type="textarea" :rows="文本行数"></el-input>
我们来举个例子～
对 Input.vue 文件做如下修改：
<template>
  <el-input
    type="textarea"
    :rows="5"
    placeholder="请输入你的评论"
    v-model="textarea"
  >
  </el-input>
</template>
<script>
  export default {
    data() {
      return {
        textarea: "",
      };
    },
  };
</script>
<style></style>
显示效果如下：
1678409855835
# Select 选择器
Select 选择器就是下拉菜单，比如很多网站的导航栏每一项就会有一个下拉菜单。比如当当网的 Header 处。
1678409904294
Element UI 提供了 <el-select> 和 <el-option> 来创建 Select 选择器。
我们举个例子来看看其用法吧！
新建一个 src/views/Select.vue 文件，并对 App.vue 文件做如下修改：
<template>
  <div id="app">
    <select />
  </div>
</template>
<script>
  import Select from "./views/Select.vue";
  export default {
    name: "App",
    components: {
      Select,
    },
  };
</script>
<style></style>
在 Select.vue 文件中写入以下内容。
<template>
  <el-select v-model="value" placeholder="水果分类">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          {
            value: "选项1",
            label: "苹果",
          },
          {
            value: "选项2",
            label: "橘子",
          },
          {
            value: "选项3",
            label: "西瓜",
          },
          {
            value: "选项4",
            label: "火龙果",
          },
          {
            value: "选项5",
            label: "百香果",
          },
        ],
        value: "",
      };
    },
  };
</script>
<style></style>
显示效果如下所示：
1678409927502
# 基础多选
上面我们实现了下拉菜单的单选功能，在有些时候，我们还会用到多选，用 Tag 展示已选项，比如选择自己的个性标签。
1678409943137
我们为 <el-select> 添加 multiple 属性即可启用多选，此时 v-model 的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现。
我们来举个例子～
对 Select.vue 文件做如下修改
<template>
  <el-select v-model="value" placeholder="水果分类" multiple>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          {
            value: "选项1",
            label: "苹果",
          },
          {
            value: "选项2",
            label: "橘子",
          },
          {
            value: "选项3",
            label: "西瓜",
          },
          {
            value: "选项4",
            label: "火龙果",
          },
          {
            value: "选项5",
            label: "百香果",
          },
        ],
        value: "",
      };
    },
  };
</script>
<style></style>
显示效果如下：
1678409985682
我们还可以使用 collapse-tags 属性将它们合并为一段文字。
在上面代码中添加 collapse-tags 属性。
<template>
  <el-select v-model="value" placeholder="水果分类" multiple collapse-tags>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          {
            value: "选项1",
            label: "苹果",
          },
          {
            value: "选项2",
            label: "橘子",
          },
          {
            value: "选项3",
            label: "西瓜",
          },
          {
            value: "选项4",
            label: "火龙果",
          },
          {
            value: "选项5",
            label: "百香果",
          },
        ],
        value: "",
      };
    },
  };
</script>
<style></style>
显示效果如下：
1678410026822
# Switch 开关
Element UI 提供了 <el-switch> 来实现 Switch 开关，它表示两种相互对立的状态间的切换，就像灯一样，要么开，要么关。比如：很多手机设置里的都会用到。
1678410053486
那我们来看看 Switch 开关究竟是如何使用的。
新建一个 src/views/Switch.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Switch1 />
  </div>
</template>
<script>
  import Switch1 from "./views/Switch.vue";
  export default {
    name: "App",
    components: {
      Switch1,
    },
  };
</script>
<style></style>
在 Switch.vue 文件中写入以下内容。
<template>
  <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
  </el-switch>
</template>
<script>
  export default {
    data() {
      return {
        value: true,
      };
    },
  };
</script>
<style></style>
显示效果如下所示：
1678410099420
在上面代码中，在 <el-switch> 上使用 v-mode 属性绑定了一个 Boolean 类型的变量，使用 active-color 属性和 inactive-color 属性来设置开关的背景色，开时为绿色，关时为红色。
# 文字描述
添加 active-text 属性和 inactive-text 属性来设置开关的文字描述。
我们在上面代码中添加文字描述相关属性。
<template>
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-text="开灯"
    inactive-text="关灯"
  >
  </el-switch>
</template>
<script>
  export default {
    data() {
      return {
        value: true,
      };
    },
  };
</script>
<style></style>
显示效果如下所示：
1678410138117
# DatePicker 日期选择器
我们在填一些电子个人信息表时，一般点击填写生日的输入框，会出现一个日历供我们选择日期，像这样的显示就可以用 DatePicker 日期选择器来实现的。
在 Element UI 中提供了 <el-date-picker> 来实现日期选择器。
我们举个例子来看看具体是怎么使用的。
新建一个 src/views/DatePicker.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <DatePicker />
  </div>
</template>
<script>
  import DatePicker from "./views/DatePicker.vue";
  export default {
    name: "App",
    components: {
      DatePicker,
    },
  };
</script>
<style></style>
接下来，我们在 DatePicker.vue 文件中使用日期选择器～
<template>
  <el-date-picker v-model="value" type="date" placeholder="选择日期">
  </el-date-picker>
</template>
<script>
  export default {
    data() {
      return {
        value: "",
      };
    },
  };
</script>
<style></style>
显示效果如下：
1678410177115
在上面代码中，使用 type=“date” 属性指定日期以「日」为基本单位。
除了以「日」为基本单位，我们还可以以周（type="week"）、月（type="month"）、年（demonstration）为基本单位，其使用方法同上，我就不举例了。
# 选择日期范围
某些时候我们在网上预定酒店，需要选择入住时间和离店时间，比如在携程上订酒店。
1678410191790
type 属性有个 daterange 属性值可以实现在一个选择器中选择一个时间范围。
我们来举个例子～
对 DatePicker.vue 文件做如下修改：
<template>
  <el-date-picker
    v-model="value"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  >
  </el-date-picker>
</template>
<script>
  export default {
    data() {
      return {
        value: "",
      };
    },
  };
</script>
<style></style>
显示效果如下：
1678410221394
在上面代码中，使用 range-separator 属性设置日期间隔，使用 start-placeholder 属性设置开始日期，使用 end-placeholder 属性设置结束日期。
DatePicker 日期选择器就为大家介绍到这里，接下来给大家介绍 Upload 上传。
# Upload 上传
上传是我们常用的功能，比如在蓝桥云课中的基本信息里上传自己的头像。
1678410257972
Element UI 为我们提供了 <el-upload> 来实现上传。
需要注意的是：要实现上传功能我们必须要添加 action 属性，其属性值为上传的地址。
我们来看看上传功能是如何实现的。
新建一个 src/views/Upload.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Upload />
  </div>
</template>
<script>
  import Upload from "./views/Upload.vue";
  export default {
    name: "App",
    components: {
      Upload,
    },
  };
</script>
<style></style>
在 Upload.vue 文件中写入以下内容。
<template>
  <el-upload action="https://jsonplaceholder.typicode.com/posts/">
    上传
  </el-upload>
</template>
<script></script>
<style></style>
可以看到我们现在已经实现了上传功能。
1678410292903
上传功能虽然已经实现了，但看起来过于简单，我们可以为其添加一些属性，让它看起来更接近日常生活我们见到的上传功能。关于 <el-upload> 的属性很多，这里我们只选取部分来做练习。
我们对 Upload.vue 文件做如下修改。
<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    accept="image/*"
    :auto-upload="false"
  >
    <el-button size="small" type="primary">选取文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
  </el-upload>
</template>
<script></script>
<style>
  .el-upload__tip {
    color: #787a91;
  }
</style>
显示效果如下所示：
1678410323731
代码说明如下：
  • 在上面代码中，我们使用 accept 属性限制了上传文件的类型为图片类型。
  • 使用 auto-upload 属性设置文件被选取后是否立即进行上传，这里设置为否。
目前我们实现了上传文件，并在页面上显示上传文件的文件名。那我们能不能让上传的图片展示在页面上呢？可以的。
我们来看代码示范例。
# 上传图片展示
要实现图片上传并显示到页面这个功能，有以下两个必不可少的属性需要被添加：
  1. 需要有一个 on-success 属性，其属性值为当照片上传成功时调用的钩子函数，该函数用来实现照片上传功能。
  2. 需要有一个 before-upload 属性，其属性值为照片上传之前执行的钩子函数，该函数用来判断上传文件的类型。
好了，我们来看看如何用代码实现吧！
我们对 Upload.vue 文件做如下修改。
<template>
  <el-upload
    class="avatar-uploader"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>
<script>
  export default {
    data() {
      return {
        imageUrl: "",
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg"; // 判断上传文件类型
        const isLt2M = file.size / 1024 / 1024 < 2; // 判断文件的大小
        // 若不符合要求则发出警告信息
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
    },
  };
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
显示效果如下所示：
1678410360098
# Form 表单
在前面我们学习了各种各样的表单组件（单选框、多选框等等），现在我们是时候让这些组件聚在一起了。我们平时在网上看到的页面表单肯定不会只包含一种组件，通常都是几种组件结合在一起使用。比如知乎的个人信息页面，我们可以看到表单上有输入框、日期选择器、下拉菜单等。
1678410393510
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件。
其使用格式如下所示：
<el-form>
  <el-form-item>
    <!-- 里面放表单组件 -->
  </el-form-item>
  <el-form-item>
    <!-- 里面放表单组件 -->
  </el-form-item>
  <el-form-item>
    <!-- 里面放表单组件 -->
  </el-form-item>
  ...
</el-form>
接下来，我们来实现一个宠物寄养申请表吧！
新建一个 src/views/Form.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <el-form ref="form" :model="form">
    <h2>欢迎加入寄养大家庭</h2>
    <!-- 家庭名称 -->
    <el-form-item label="家庭名称">
      <el-input v-model="form.name" style="width:200px"></el-input>
    </el-form-item>
    <!-- 提供物品 -->
    <el-form-item label="提供物品">
      <el-select
        v-model="form.article"
        placeholder="请选择提供宠物的物品"
        multiple
      >
        <el-option label="玩具" value="toy"></el-option>
        <el-option label="零食" value="snack"></el-option>
        <el-option label="饮用水" value="water"></el-option>
        <el-option label="主食" value="staple"></el-option>
      </el-select>
    </el-form-item>
    <!-- 寄养时间 -->
    <el-form-item label="寄养时间">
      <el-date-picker
        v-model="form.date1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </el-form-item>
    <!-- 接送开关 -->
    <el-form-item label="是否接送">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
    <!-- 家庭环境 -->
    <el-form-item label="家庭环境">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="大阳台" name="type"></el-checkbox>
        <el-checkbox label="空调" name="type"></el-checkbox>
        <el-checkbox label="海边" name="type"></el-checkbox>
        <el-checkbox label="电梯" name="type"></el-checkbox>
        <el-checkbox label="小区花园" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <!-- 家庭描述 -->
    <el-form-item label="家庭描述">
      <el-input
        type="textarea"
        v-model="form.desc"
        :rows="5"
        style="width:400px"
      ></el-input>
    </el-form-item>
    <!-- 申请和取消按钮 -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">申请</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: "",
          article: "",
          date1: "",
          delivery: false,
          type: [],
          desc: "",
        },
      };
    },
    methods: {
      onSubmit() {
        alert("发送成功！");
      },
    },
  };
</script>
<style></style>
显示效果如下所示：
1678410429009
# 实验总结
本节实验给大家介绍了三种表单组件，分别是：
  • Radio 单选框：在一组备选项中进行单选。
  • Checkbox 多选框：在一组备选项中进行多选。
  • Input 输入框：通过鼠标或键盘输入字符。
  • Select 选择器：当选项过多时，使用下拉菜单展示并选择内容。
  • Switch 开关：表示两种相互对立的状态间的切换，多用于触发「开 / 关」。
  • DatePicker 日期选择器：用于选择或输入日期。
  • Upload 上传：通过点击或者拖拽上传文件。
  • Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
# 导航组件
我们随便打开一个网站，在其主页都能看到导航，它是各大网站的主页必不可少的部分，所以 Element UI 也为我们提供了丰富的导航组件，基本能满足我们的日常开发。
获取本节实验初始项目：
wget https://labfile.oss.aliyuncs.com/courses/5246/elementui.zip && unzip elementui.zip
# 知识点
  • NavMenu 导航菜单
  • Tabs 标签页
  • Breadcrumb 面包屑
  • Dropdown 下拉菜单
  • Steps 步骤条
例如下图蓝桥云课的水平导航菜单。
1678289460057
例如下图蓝桥云课的垂直导航菜单。
1678289471245
在 Element UI 中提供了 <el-menu> + <el-menu-item> 来实现一个基本的垂直导航菜单。
其基本使用格式为：
其基本使用格式为：
<el-menu>
  <el-menu-item></el-menu-item>
  <el-menu-item></el-menu-item>
  ...
</el-menu>
我们来看个例子～
新建一个 src/views/NavMenu.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <NavMenu />
  </div>
</template>
<script>
  import NavMenu from "./views/NavMenu.vue";
  export default {
    name: "App",
    components: {
      NavMenu,
    },
  };
</script>
<style></style>
在 NavMenu.vue 文件中写入以下代码：
<template>
  <el-menu>
    <el-menu-item>全部课程</el-menu-item>
    <el-menu-item>后端开发</el-menu-item>
    <el-menu-item>前端开发</el-menu-item>
    <el-menu-item>人工智能</el-menu-item>
    <el-menu-item>信息安全</el-menu-item>
    <el-menu-item>云计算与大数据</el-menu-item>
  </el-menu>
</template>
这样我们就实现了一个最基本的垂直导航：
1678289553205
同学们可能会惊讶，就这？鼠标不放上去，还以为是列表呢！😫 这个导航与我们实际应用的导航开发差距太大了吧！我们通常见到的导航都有多级，而且带有一些样式，如下图携程旅行的首页：
1678289589144
对 NavMenu.vue 文件做如下修改：
<template>
  <el-menu class="el-menu-vertical-demo">
    <el-menu-item class="item1">
      <i class="el-icon-s-grid"></i>
      全部课程
    </el-menu-item>
    <el-submenu index="1">
      <template slot="title">
        <span>后端开发</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>Python</el-menu-item>
        <el-menu-item>Go</el-menu-item>
        <el-menu-item>Java</el-menu-item>
        <el-menu-item>SpringBoot</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <span>前端开发</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>HTML</el-menu-item>
        <el-menu-item>Vue.js</el-menu-item>
        <el-menu-item>CSS</el-menu-item>
        <el-menu-item>TypeScript</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <span>人工智能</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>机器学习</el-menu-item>
        <el-menu-item>OpenCV</el-menu-item>
        <el-menu-item>TensorFlow</el-menu-item>
        <el-menu-item>NLP</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <span>信息安全</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>网络安全</el-menu-item>
        <el-menu-item>网络开发</el-menu-item>
        <el-menu-item>渗透测试</el-menu-item>
        <el-menu-item>密码学</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="5">
      <template slot="title">
        <span>云计算与大数据</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>Docker</el-menu-item>
        <el-menu-item>AWS</el-menu-item>
        <el-menu-item>OpenStack</el-menu-item>
        <el-menu-item>Hadoop</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<style>
  .el-menu-vertical-demo {
    background: #f3f0d7;
    width: 20%;
  }
  span {
    color: #bbbbbb;
  }
  .item1 {
    background: #e8e8e8;
  }
</style>
显示效果如下所示：
1678289894454
代码说明如下：
  • 通过使用 <el-submenu> 组件可以生成二级菜单，并使用 index 属性设置了每组的唯一标志。
  • 通过使用 <el-menu-item-group> 组件可以实现菜单进行分组，并通过具名 slot 设定了分组名。
我们怎么实现水平导航呢？很简单，加一个 mode 属性就可以使导航菜单变为水平模式。
我们在 NavMenu.vue 文件添加以下代码：
<!-- 只给出新增部分代码 -->
<template>
  <el-menu
    class="el-menu-vertical-demo"
    mode="horizontal"
    background-color="#f3f0d7"
    text-color="black"
  >
  ...
</template>
<style>
  .el-menu-vertical-demo {
    background: #f3f0d7;
    width: 20%;
  }
  span {
    color: #bbbbbb;
  }
  .item1 {
    background: #e8e8e8;
  }
</style>
显示效果如下：
1678289960900
在上面代码中，我们给 <el-menu> 组件添加了 mode 属性，其属性值为 horizontal 表示导航菜单水平显示； text-color 属性，用于给导航菜单的文字设置颜色，其属性值为 black 表示给导航菜单的文字颜色设置为黑色。
ok，NavMenu 导航菜单的内容就为大家讲到这里，想了解更多请看官方文档。
# Tabs 标签页
1678290038812
我们使用 <el-tabs> 和 <el-tab-pane> 组件就可以实现基础的标签页。
其使用格式为：
<el-tabs>
  <el-tab-pane></el-tab-pane>
  <el-tab-pane></el-tab-pane>
  ...
</el-tabs>
我们来看看具体的例子吧！
新建一个 src/views/Tabs.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Tabs />
  </div>
</template>
<script>
  import Tabs from "./views/Tabs.vue";
  export default {
    name: "App",
    components: {
      Tabs,
    },
  };
</script>
<style></style>
在 Tabs.vue 文件中写入以下代码。
<template>
  <el-tabs v-model="activeName" type="border-card" style="width: 50%">
    <el-tab-pane label="基本信息" name="first">
      <el-input placeholder="输入你的邮箱"></el-input>
      <el-input placeholder="邮箱验证码"></el-input>
      <el-input placeholder="密码"></el-input>
      <el-input placeholder="确认密码"></el-input>
      <el-button>确认</el-button>
    </el-tab-pane>
    <el-tab-pane label="选择类型" name="second">
      <h4>请选择企业注册地，暂只支持以下国家和地区企业类型申请帐号</h4>
      <el-select v-model="value" placeholder="水果分类">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-tab-pane>
    <el-tab-pane label="信息登记" name="third">
      <el-input placeholder="订阅号"></el-input>
      <el-input placeholder="服务号"></el-input>
      <el-input placeholder="企业微信"></el-input>
    </el-tab-pane>
    <el-tab-pane label="公众号信息" name="fourth">
      <el-input placeholder="公众号名"></el-input>
      <el-input placeholder="公众号类型"></el-input>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: "second",
        options: [
          {
            label: "中国大陆",
          },
          {
            label: "中国香港",
          },
        ],
      };
    },
  };
</script>
<style>
  .el-input {
    margin-bottom: 20px;
  }
</style>
显示效果如下所示：
1678290114026
代码说明如下：
  • 在 <el-tabs> 中使用 v-model 属性绑定了标签页中的 name 属性，用于设置默认选中的标签页，这里我们设置默认选中第一个标签页。
  • 在 <el-tabs> 中使用 type 属性设置标签页卡片化。
  • 在 <el-tab-pane> 中使用 label 属性设置选项卡的标题，使用 name 属性与 <el-tabs v-model="activeName"> 中的 activeName 的值对应。
有同学会问了，我们日常看到的标签页不一定在顶部位置，那我们怎么调整标签页的位置呢？很简单添加 tab-position 属性就可以了，该属性有以下四个属性值。
属性值说明
top显示在顶部。
right显示在右侧。
bottom显示在底部。
left显示在左侧。
我们对 Tabs.vue 文件做如下修改。
<template>
  <div>
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
      <el-radio-button label="top">top</el-radio-button>
      <el-radio-button label="right">right</el-radio-button>
      <el-radio-button label="bottom">bottom</el-radio-button>
      <el-radio-button label="left">left</el-radio-button>
    </el-radio-group>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tabPosition: "top",
      };
    },
  };
</script>
显示效果如下所示：
1678290156296
在上面代码中，我们增加了一组表单组件，用来切换 tab-position 属性为不同值时的状态，通过数据绑定的方式，来控制标签页的位置显示。
ok，Tabs 标签页的内容就为大家讲到这里，接下来为大家介绍 Breadcrumb 面包屑。
Breadcrumb 面包屑适用于具有层级关系的页面，通过显示当前页面的访问路径，我们可以快速访问详情页，这就像我们访问电脑上存储的文件一样，一层一层的。比如下图所示的后台管理系统。
在 Element UI 中，为我们提供了 <el-breadcrumb> 和 <el-breadcrumb-item> 组件来实现面包屑的效果。
其使用格式如下：
<el-breadcrumb>
  <el-breadcrumb-item></el-breadcrumb-item>
  <el-breadcrumb-item></el-breadcrumb-item>
  ...
</el-breadcrumb>
新建一个 src/views/Breadcrumb.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Breadcrumb />
  </div>
</template>
<script>
  import Breadcrumb from "./views/Breadcrumb.vue";
  export default {
    name: "App",
    components: {
      Breadcrumb,
    },
  };
</script>
<style></style>
在 Breadcrumb.vue 文件中写入以下内容。
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="#">管理</a></el-breadcrumb-item>
    <el-breadcrumb-item><a href="#">列表</a></el-breadcrumb-item>
    <el-breadcrumb-item><a href="#">详情</a></el-breadcrumb-item>
  </el-breadcrumb>
</template>
显示效果如下：
1678290246955
在上面代码中，使用 separator-class 属性用来设置以 Icon 图标作为分隔符。我们还可以使用 separator 属性来设置字符串类型的分隔符，其默认值为斜杠 / 。
Breadcrumb 面包屑就为大家讲到这里，接下来我们看一看 Dropdown 下拉菜单。
在 Element UI 中为我们提供了 Dropdown 组件，当我们移动到下拉菜单上时，会展开菜单的具体项。
1678290285387
我们通过使用 <el-dropdown> 、 <el-dropdown-item> 和 <el-dropdown-menu> 来实现下拉菜单，它们在下拉菜单中充当什么角色呢？具体我们来看代码例子。
新建一个 src/views/Dropdown.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Dropdown />
  </div>
</template>
<script>
  import Dropdown from "./views/Dropdown.vue";
  export default {
    name: "App",
    components: {
      Dropdown,
    },
  };
</script>
<style></style>
在 Dropdown.vue 文件中写入以下内容。
<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      前端方向
      <i class="el-icon-arrow-down"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>HTML</el-dropdown-item>
      <el-dropdown-item divided>jQuery</el-dropdown-item>
      <el-dropdown-item divided>webpack</el-dropdown-item>
      <el-dropdown-item divided>CSS</el-dropdown-item>
      <el-dropdown-item divided>TypeScript</el-dropdown-item>
      <el-dropdown-item divided disabled>更多</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<style>
  .el-dropdown-link {
    color: #00bcd4;
  }
</style>
显示效果如下所示：
1678290332239
在上面代码中，使用 <el-dropdown> 标签代表当前是创建的一个下拉菜单；使用 <el-dropdown-menu> 代表下拉菜单的菜单表；使用 <el-dropdown-item> 代表菜单的每一项。
Dropdown 下拉菜单就为大家讲到这里，接下来给大家介绍 Steps 步骤条。
# Steps 步骤条
Steps 步骤条 用于引导用户按照流程分步骤完成任务，通常不可跳过其中一步或者颠倒步骤的顺序。比如我们注册微信公众号，需要填注册信息，其填写内容被分为 4 个标签页，每个标签对应一块页面内容。
1678290362816
在 Element UI 中提供了 <el-steps> 和 <el-step> 标签来实现步骤条。
其使用格式如下所示：
<el-steps>
  <el-step title="步骤名"></el-step>
  <el-step title="步骤名"></el-step>
  <el-step title="步骤名"></el-step>
  ...
</el-steps>
我们来看看具体的例子吧！
新建一个 src/views/Steps.vue 文件，并对 App.vue 文件对如下修改。
<template>
  <div id="app">
    <Steps />
  </div>
</template>
<script>
  import Steps from "./views/Steps.vue";
  export default {
    name: "App",
    components: {
      Steps,
    },
  };
</script>
<style></style>
在 Steps.vue 文件中写入代码。
<template>
  <div>
    <el-steps :active="active" finish-status="success" style="width:50%">
      <el-step title="二级部门"></el-step>
      <el-step title="一级部门"></el-step>
      <el-step title="人力资源部"></el-step>
    </el-steps>
    <el-button type="success" style="margin: 40px 20%" @click="next"
      >下一步</el-button
    >
  </div>
</template>
<script>
  export default {
    data() {
      return {
        active: 0,
      };
    },
    methods: {
      next() {
        if (this.active++ > 2) {
          alert("审批已通过！");
        }
      },
    },
  };
</script>
显示效果如下：
1678290404616
代码说明如下：
  • 上面定义的导航条一共有三个步骤，使用 title 属性为每个步骤设置了步骤名。
  • 在 <el-steps> 中使用 finish-status 属性设置了结束步骤的状态为 success 成功。
  • 在 <el-steps> 中使用 active 属性设置当前激活步骤，这里我们设置 active 的值为 0，即激活步骤为第一步。
  • 使用 <el-button> 定义了一个按钮，并绑定了一个点击事件，当我们点击按钮时，触发 next 方法，该方法中，使用 if 语句判断当前步骤是否大于总步骤数，如果大于则弹出警告框，否则就正常跳转到下一步进行操作。
我们还可以实现垂直的导航条，我们来看看代码。
对 Steps.vue 文件做如下修改。
<template>
  <div style="height:300px">
    <el-steps :active="active" finish-status="success" direction="vertical">
      <el-step
        title="申请"
        icon="el-icon-edit"
        description="需要提供详细的申请资料"
      ></el-step>
      <el-step
        title="批准"
        icon="el-icon-connection"
        description="需要经过三个部门的批准"
      ></el-step>
      <el-step
        title="购买"
        icon="el-icon-shopping-cart-full"
        description="需要开发票及相关单据"
      ></el-step>
    </el-steps>
    <el-button type="success" style="margin-top:30px" @click="next"
      >下一步</el-button
    >
  </div>
</template>
<script>
  export default {
    data() {
      return {
        active: 0,
      };
    },
    methods: {
      next() {
        if (this.active < 3) {
          this.active++;
        }
      },
    },
  };
</script>
显示效果如下所示：
1678290455427
代码说明如下：
  • 在 <el-steps> 中，使用 direction 属性来设置显示方向，其属性值为 vertical 表示步骤导航条垂直显示。
  • 在 <el-step> 中，使用 icon 属性给步骤条的每一步设置了 Icon 图标；使用 description 属性给每步骤添加了描述性文字。
以上就是我们实验的全部内容。
# 实验总结
本节实验为大家介绍了以下五种导航组件：
  • NavMenu 导航菜单：为网站提供导航功能的菜单。
  • Tabs 标签页：俗称选项卡，分割内容上有关联但属于不同类别的数据集合。
  • Breadcrumb 面包屑：显示当前页面的路径，快速返回之前的任意页面。
  • Dropdown 下拉菜单：将动作或菜单折叠到下拉菜单中。
  • Steps 步骤条：引导用户按照流程完成任务的分步导航条，可根据实际应用设定步骤，但步骤不少于 2 步。