第13次 · 基础组件：按钮、图标与文字排版

2026-09-19 · Vue 3 + Element Plus 前端开发 · 课程笔记

课堂练习资料 13-基础组件按钮图标与文字排版.zip

下载 ZIP 压缩包

第13次 · 基础组件：按钮、图标与文字排版

第1/7页 · 先知道今天要做什么

页面结构搭好了（第 12 课），接下来往里面放“零件”。今天讲三类最基础的零件：

按钮：一个按钮能有多少种状态？类型（颜色）、朴素、圆角、圆形、禁用、加载中、纯图标、按钮组、文字按钮。把这九种练熟，你以后就不会到处手写 <div class="btn"> 了。
图标：Element Plus 的图标是独立包，怎么引入、怎么跟按钮搭配、怎么调大小和颜色。
文字排版：标题层级、次要文字、成功/警告/危险文字、超长文本省略号、分割线、间距容器。这些是“页面看起来是否专业”的分水岭。

今天的场景

做一个“组件样式速查页”。三块：一排按钮把所有形态走一遍；一排图标演示大小与颜色；一块文字排版演示标题、省略号和链接。

下课时拿出这三样结果

做到什么	在哪里看	完成的证据
会挑按钮类型	按钮区	能根据语义选对 `type`（主要用 primary、危险操作 danger、成功提示 success）。
会用加载态按钮	按钮区	点“提交”后按钮进入 loading，3 秒后恢复，且防重复点击。
会用图标与省略号	图标区、文字区	图标能随文字大小变化；长文本显示省略号并有提示。

你只需要带着这些基础来

第 11—12 课的内容。

本课时 45 分钟怎么上

时间	老师带着做	学生留下什么
0—8 分钟	讲按钮的类型体系与语义选择；讲 `loading` 与 `disabled` 在“防重复提交”中的作用。	能说出什么时候用哪种按钮。
8—18 分钟	讲图标包的引入方式与三种用法（独立、配按钮、配文字）。	会引入并使用图标。
18—30 分钟	讲文字排版组件与省略号、分割线、间距。	会做“看起来很整齐”的文字块。
30—42 分钟	粘贴本课 `App.vue`，逐个点按钮看形态。	九种按钮形态都能对上。
42—45 分钟	抽查：问“为什么危险操作不用 primary 按钮”。	全员提交。

从哪里开始

复制第 12 课的工程，改名 lesson-vue-13。

本课图标有两种路线：

路线 A（本课默认，零额外依赖）：用内联 SVG 放进 el-icon，粘贴即可运行；
路线 B（真实项目推荐）：npm install @element-plus/icons-vue，然后 import { Search } from '@element-plus/icons-vue'。

两种方式在讲义里都会给出代码，App.vue 用路线 A 保证能直接跑。

今天先掌握到这里

第 14 课开始讲表单控件——那时你会用到今天的按钮做“提交/重置”。

来源：本课自编 Vue 3 前端核心技能实训 · 语法依据 Vue 3.5 官方文档 · 组件依据 Element Plus 2.8 官方文档

第2/7页 · 把新词说清楚

新词与本课含义

名字	用熟悉的话理解	本课里长什么样
`type`	按钮的“语义颜色”。	`primary` / `success` / `warning` / `danger` / `info`
`plain`	朴素按钮：浅底深字，适合次要操作。	`<el-button plain>`
`round` / `circle`	圆角 / 圆形按钮。	`<el-button round>`
`loading`	加载态：显示转圈并自动禁用。	`:loading="submitting"`
`text`	文字按钮：没有边框和底色。	`<el-button text>`
按钮组	把几个按钮拼在一起。	`<el-button-group>`
`el-icon`	图标的容器，负责大小与对齐。	`<el-icon :size="20">...</el-icon>`
省略号	文字太长时显示 `…`。	`el-text` 的 `truncated`

按钮类型怎么选（语义对照）

场景	用哪个 type	说明
页面最主要的动作（提交、保存、确认）	`primary`	一屏里一般只放一个。
删除、清空、不可逆操作	`danger`	视觉上最“重”，要慎用。
成功类动作（通过、完成）	`success`	常用于审核通过。
提醒类动作（提醒、警告确认）	`warning`	例如“强制退出”。
普通次要动作（取消、返回）	默认（无 type）	数量最多，不抢视线。
更进一步弱化（表格里的小操作）	`link` 或 `text`	不占视觉重量。

一条经验：一屏里 primary 按钮不要超过两个。 全都强调，等于全都不强调。

按钮的常用属性

属性	作用	什么时候用
`type`	颜色语义	见上表
`plain`	朴素样式	次要操作，例如“编辑”
`round` / `circle`	形状	圆形按钮配图标
`loading`	加载中并禁用	提交类操作的标配
`disabled`	禁用	条件不满足时
`text` / `link`	无边框 / 像链接	弱化操作
`icon`	在按钮里直接放图标组件	`:icon="Search"`

关于 loading 的重要认识：它不只是“转个圈”，它同时阻止用户再次点击。这就是“防重复提交”最省事的实现方式——提交开始时把 loading 置为 true，请求结束后置回 false。

图标：两条路线

路线 A：内联 SVG（零依赖，粘贴即用）

<script setup>
import { ElIcon } from 'element-plus'
import 'element-plus/dist/index.css'
</script>

<template>
  <el-icon :size="24" color="#409eff">
    <svg viewBox="0 0 1024 1024" width="1em" height="1em">
      <path fill="currentColor" d="M400 800 L160 560 L224 496 L400 672 L800 272 L864 336 Z" />
    </svg>
  </el-icon>
</template>

要点：width/height 写 1em，让图标跟着 el-icon 的 size 走；fill="currentColor" 让图标颜色跟着 color 走。

路线 B：官方图标包（真实项目推荐）

npm install @element-plus/icons-vue

<script setup>
import { Search, Delete, Edit } from '@element-plus/icons-vue'
import { ElIcon, ElButton } from 'element-plus'
</script>

<template>
  <el-icon><Search /></el-icon>
  <el-icon :size="20" color="#f56c6c"><Delete /></el-icon>

  <!-- 按钮里直接放图标：用 icon 属性 -->
  <el-button type="primary" :icon="Search">搜索</el-button>
  <!-- 或者放在默认插槽里 -->
  <el-button type="danger"><el-icon><Delete /></el-icon>删除</el-button>
</template>

文字排版常用组件

组件	用途	关键属性
`el-text`	文字，可指定语义类型	`type="secondary/success/warning/danger/info"`、`size`、`truncated`
`el-divider`	分割线，可带文字	`content-position="left/center/right"`
`el-space`	一行/一列元素之间自动留空隙	`size`、`direction="vertical"`、`wrap`、`fill`
`el-tag`	标签徽章	`type`、`effect="light/dark/plain"`、`closable`
`el-badge`	数字角标	`:value`、`:max`、`is-dot`

只看这几行：超长文本的省略号

<el-text truncated style="max-width: 200px">
  这是一段很长很长的文字，超过容器宽度之后会自动变成省略号……
</el-text>

先口头预测：如果文字真的被截断成省略号，用户怎么看到完整内容？

要自己再加一层提示。 省略号本身只解决“不撑破布局”，不解决“看到全文”。正确做法是用 el-tooltip 包起来，鼠标悬停时显示完整文本。这也是实际项目里“表格列内容太长”的标准处理方式。

来源：本课自编 Vue 3 前端核心技能实训 · 语法依据 Vue 3.5 官方文档 · 组件依据 Element Plus 2.8 官方文档

第3/7页 · 先看一个小例子

完整代码：App.vue（组件样式速查页）

<script setup>
import { ref, h } from 'vue'
import {
  ElConfigProvider, ElCard, ElRow, ElCol, ElButton, ElButtonGroup, ElIcon,
  ElText, ElDivider, ElSpace, ElTag, ElBadge, ElTooltip, ElLink,
  ElAlert, ElMessage, ElSwitch
} from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'

/* 内联 SVG 图标：零额外依赖，粘贴即可运行
   （真实项目建议 npm install @element-plus/icons-vue） */
const IconCheck = () => h('svg', { viewBox: '0 0 1024 1024', width: '1em', height: '1em' }, [
  h('path', { fill: 'currentColor', d: 'M400 800 L160 560 L224 496 L400 672 L800 272 L864 336 Z' })
])
const IconStar = () => h('svg', { viewBox: '0 0 1024 1024', width: '1em', height: '1em' }, [
  h('path', { fill: 'currentColor', d: 'M512 64 L640 400 L1000 416 L720 640 L800 992 L512 800 L224 992 L304 640 L24 416 L384 400 Z' })
])
const IconHeart = () => h('svg', { viewBox: '0 0 1024 1024', width: '1em', height: '1em' }, [
  h('path', { fill: 'currentColor', d: 'M512 896 C512 896 128 640 128 384 C128 256 224 160 352 160 C432 160 496 208 512 240 C528 208 592 160 672 160 C800 160 896 256 896 384 C896 640 512 896 512 896 Z' })
])

/* 演示 loading 与防重复提交 */
const submitting = ref(false)
function fakeSubmit() {
  if (submitting.value) return          // 第二道保险
  submitting.value = true
  ElMessage.info('开始提交（按钮已进入 loading 且不可再点）')
  setTimeout(() => {
    submitting.value = false
    ElMessage.success('提交完成')
  }, 3000)
}

const follow = ref(true)
const longText = '这是一段很长的说明文字，用来演示省略号的效果。当容器宽度不够时，超出部分会被截断成省略号，鼠标悬停可以看到完整内容。'
</script>

<template>
  <el-config-provider :locale="zhCn">
    <div class="page">
      <h1 class="title">组件样式速查</h1>

      <el-card class="block">
        <template #header>按钮</template>

        <el-divider content-position="left">类型与语义</el-divider>
        <el-space wrap>
          <el-button type="primary">主要 primary</el-button>
          <el-button type="success">成功 success</el-button>
          <el-button type="warning">警告 warning</el-button>
          <el-button type="danger">危险 danger</el-button>
          <el-button type="info">信息 info</el-button>
          <el-button>默认（次要）</el-button>
        </el-space>

        <el-divider content-position="left">形态</el-divider>
        <el-space wrap>
          <el-button plain>朴素</el-button>
          <el-button type="primary" round>圆角</el-button>
          <el-button type="success" plain round>朴素圆角</el-button>
          <el-button :icon="IconStar" circle />
          <el-button type="primary" :icon="IconCheck">带图标</el-button>
          <el-button text>文字按钮</el-button>
          <el-button link type="primary">链接按钮</el-button>
          <el-button disabled>已禁用</el-button>
          <el-button type="primary" :loading="submitting" @click="fakeSubmit">
            {{ submitting ? '提交中…' : '点我进入 loading' }}
          </el-button>
        </el-space>

        <el-divider />

        <p class="label">按钮组：</p>
        <el-button-group>
          <el-button>左</el-button>
          <el-button>中</el-button>
          <el-button>右</el-button>
        </el-button-group>

        <el-alert
          title="loading 会同时禁用按钮，这就是「防重复提交」最省事的做法：请求开始置 true，结束置 false。"
          type="info" :closable="false" show-icon style="margin-top: 12px"
        />
      </el-card>

      <el-row :gutter="16">
        <el-col :xs="24" :md="12">
          <el-card class="block">
            <template #header>图标：大小与颜色</template>
            <el-space wrap :size="14">
              <el-icon :size="16"><IconCheck /></el-icon>
              <el-icon :size="22"><IconCheck /></el-icon>
              <el-icon :size="30" color="#409eff"><IconStar /></el-icon>
              <el-icon :size="30" color="#f56c6c"><IconHeart /></el-icon>
              <el-icon :size="30" color="#67c23a"><IconCheck /></el-icon>
              <el-icon :size="30" color="#e6a23c"><IconStar /></el-icon>
            </el-space>

            <el-divider />

            <p class="label">图标配按钮 / 配文字</p>
            <el-space wrap>
              <el-button type="primary" :icon="IconCheck">通过</el-button>
              <el-button type="danger" plain :icon="IconHeart">收藏</el-button>
              <el-text>
                <el-icon><IconStar /></el-icon> 收藏本页
              </el-text>
            </el-space>

            <el-divider />

            <p class="label">角标与标签</p>
            <el-space wrap :size="18">
              <el-badge :value="5"><el-button>消息</el-button></el-badge>
              <el-badge :value="120" :max="99"><el-button>通知</el-button></el-badge>
              <el-badge is-dot><el-text>有新内容</el-text></el-badge>
              <el-tag>默认</el-tag>
              <el-tag type="success" effect="dark">深色</el-tag>
              <el-tag type="warning" effect="plain">朴素</el-tag>
              <el-tag closable @close="ElMessage.info('标签被关闭')">可关闭</el-tag>
            </el-space>
          </el-card>
        </el-col>

        <el-col :xs="24" :md="12">
          <el-card class="block">
            <template #header>文字排版</template>
            <el-text size="large" tag="b">大号加粗文字</el-text>
            <div style="height: 8px" />
            <el-text>普通正文文字，用于说明与描述。</el-text>
            <div style="height: 8px" />
            <el-text type="secondary">次要文字（灰）——用于补充说明</el-text>
            <div style="height: 8px" />
            <el-text type="success">成功文字</el-text>　
            <el-text type="warning">警告文字</el-text>　
            <el-text type="danger">危险文字</el-text>　
            <el-text type="info">信息文字</el-text>

            <el-divider content-position="left">省略号与提示</el-divider>

            <el-tooltip :content="longText" placement="top">
              <el-text truncated style="max-width: 220px; display: inline-block">{{ longText }}</el-text>
            </el-tooltip>

            <div style="margin-top: 10px">
              <el-link type="primary" href="https://element-plus.org" target="_blank">这是一个链接</el-link>
            </div>

            <el-divider content-position="center">居中分割线</el-divider>

            <p class="label">el-space 控制间距：</p>
            <el-space wrap :size="[10, 20]">
              <el-tag>标签一</el-tag>
              <el-tag>标签二</el-tag>
              <el-tag>标签三</el-tag>
              <el-tag>标签四</el-tag>
            </el-space>

            <el-divider />

            <el-space>
              <el-switch v-model="follow" active-text="关注更新" />
              <el-text type="secondary">当前状态：{{ follow ? '已关注' : '未关注' }}</el-text>
            </el-space>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-config-provider>
</template>

<style>
html, body, #app {
  margin: 0; padding: 0; max-width: none; width: auto; height: auto;
  display: block; place-items: initial; text-align: left; background: #f5f7fa;
}
</style>

<style scoped>
.page { max-width: 1100px; margin: 28px auto; padding: 0 16px; }
.title { font-size: 22px; color: #303133; margin: 0 0 18px; }
.block { margin-bottom: 16px; }
.label { color: #606266; font-size: 13px; margin: 0 0 8px; }
</style>

预期看见什么

第一张卡片把按钮的六种 type、九种形态全部列出来，一眼能对比。
点“点我进入 loading”：按钮文字变成“提交中…”，左侧出现转圈，同时点不动；3 秒后恢复并弹出成功提示。
图标区一排图标从小到大、从蓝到红绿黄，能明显看出 color 与 size 的作用。
角标演示：按钮右上角出现数字；is-dot 的那个是小红点。
文字排版区：四种语义颜色、超长文本被截断成省略号（悬停出现完整内容）、链接、居中分割线。
最后一行开关能切换“关注更新”的文字。

先猜一猜，读完代码再回答

fakeSubmit 里为什么要写这两句？

if (submitting.value) return          // 第二道保险
submitting.value = true

第一句是“第二道保险”。 loading 已经会让按钮点不动了，看起来不需要它。但现实中有两种情况会绕过按钮：一是用户连点两下，第一下刚触发、状态还没更新完，第二下就已经进来了；二是页面里可能还有别的地方（比如表单回车）也会调用同一个函数。在函数入口做一次状态判断，是既便宜又可靠的防护。 这个习惯在真实项目里非常重要。

来源：本课自编 Vue 3 前端核心技能实训 · 语法依据 Vue 3.5 官方文档 · 组件依据 Element Plus 2.8 官方文档

第4/7页 · 一步一步做出来

第1步：按钮的六种类型

<el-button>默认</el-button>
<el-button type="primary">primary</el-button>
<el-button type="success">success</el-button>
<el-button type="warning">warning</el-button>
<el-button type="danger">danger</el-button>
<el-button type="info">info</el-button>

预期：六种颜色，一眼能分出轻重。

第2步：形态组合

把 plain、round、circle 两两组合，观察变化。预期：plain 让底色变浅；round / circle 改形状。注意 circle 一般只放图标，放文字会变成很宽的圆。

第3步：loading 与防重复

const loading = ref(false)
function submit() {
  if (loading.value) return
  loading.value = true
  setTimeout(() => { loading.value = false }, 3000)
}

预期：点一次后按钮转圈，期间点不动；3 秒后可再点。这就是真实项目里提交按钮的标准写法。

第4步：图标（路线 A：内联 SVG）

用第 3 页给出的 IconCheck / IconStar / IconHeart 三个组件，放进 el-icon。预期：图标显示，且改 size、color 时跟着变。

关键点：SVG 里的 width="1em" height="1em" 与 fill="currentColor" 是让图标“听话”的两个设置。把 1em 改成 24（固定像素），再改 el-icon 的 size，预期：图标不再跟着变——这就说明 em 的作用。

第5步：图标（路线 B：官方图标包，可选）

npm install @element-plus/icons-vue

<script setup>
import { Search } from '@element-plus/icons-vue'
</script>

<template>
  <el-icon><Search /></el-icon>
  <el-button type="primary" :icon="Search">搜索</el-button>
</template>

预期：效果一样，但图标种类齐全（几千个）。真实项目用这条路线。 本课 App.vue 用路线 A 是为了保持“零额外依赖、粘贴即跑”。

第6步：文字省略号与提示

<el-tooltip content="完整内容在这里" placement="top">
  <el-text truncated style="max-width: 200px; display: inline-block">
    很长的文字很长的文字很长的文字很长的文字很长的文字
  </el-text>
</el-tooltip>

预期：文字被截断显示省略号，鼠标悬停出现提示。去掉 el-tooltip 再试，就能看出“只截断不提示”的体验问题。

第7步：整段替换为本课完整版

把第 3 页的完整 App.vue 覆盖 src/App.vue，把按钮、图标、文字三块都过一遍。

本课文件速查

位置	本次作用
六种 `type`	按钮的语义颜色体系。
`plain` / `round` / `circle`	三种形态修饰。
`:loading="submitting"`	加载态 + 防重复提交。
`IconCheck` 等三个 SVG 组件	零依赖的内联图标。
`el-tooltip` + `truncated`	超长文本的截断与提示。
`el-space`	自动控制元素间距。

完成修改后检查

操作或输入	预期观察
点 loading 按钮	转圈、不可点，3 秒后恢复。
连续快速点两次 loading 按钮	只触发一次提交。
改图标 `size`	图标跟随变大变小。
悬停省略号文本	出现完整内容提示。
点“可关闭”标签	标签消失并弹提示。

来源：本课自编 Vue 3 前端核心技能实训 · 语法依据 Vue 3.5 官方文档 · 组件依据 Element Plus 2.8 官方文档

第5/7页 · 换成自己的代码

你的任务

做一套自己的按钮规范页：按“主要 / 次要 / 危险 / 文字”四类各放两个例子，并写一句“什么时候用它”。
做一个模拟提交：三个按钮分别模拟“成功 / 失败 / 长时间请求”（成功 1 秒，失败 2 秒后弹 ElMessage.error，长时间 5 秒），每个都带 loading 和防重复。
给按钮加图标：至少三个按钮带图标，其中一个是纯图标圆形按钮，并给纯图标按钮加 el-tooltip 说明它是干什么的。
做一块文字排版区：包含大标题、正文、次要文字、三种语义色、超长省略 + 提示、居中分割线，要求视觉上整齐（用 el-space 控制间距，不要手写 margin 到处凑）。
用标签做状态系统：定义四种状态（进行中 / 已完成 / 已取消 / 异常）各自对应哪种 type，并列出来。

按这张操作单完成

步骤	改哪里	运行后应该看到什么
1 按钮规范	模板新增	四类按钮各两个，配说明文字。
2 模拟提交	处理函数	三种耗时的 loading 都能复现。
3 图标按钮	`:icon` / `el-tooltip`	纯图标按钮悬停有说明。
4 文字排版	`el-text` / `el-space`	间距均匀，不像手改的。
5 状态标签	`el-tag` + 映射表	四种状态颜色合理且不重复。

最低完成标准：先把这三项做实

检查项	通过条件
语义正确	危险操作一律用 `danger`，一屏内 `primary` 不超过两个。
防重复	至少一个按钮实现了 loading + 入口判重。
图标可用	图标能跟着 `size` / `color` 变化。

在本地写练习记录

抄下六种按钮类型并写上各自适用场景。
记录“固定像素 vs 1em”对图标伸缩的影响。
写下你四种状态标签的颜色选择理由。

最后交什么

提交 src/App.vue 与 练习记录.md。

来源：本课自编 Vue 3 前端核心技能实训 · 语法依据 Vue 3.5 官方文档 · 组件依据 Element Plus 2.8 官方文档

第6/7页 · 出错时从哪里查

把现象和检查动作对上

看到什么现象 / 报错	先检查哪里	修好后怎样确认
图标不显示，页面一片空	用了路线 B 但没装 `@element-plus/icons-vue`；或组件没 import。	换用内联 SVG，或装包后正常显示。
图标大小不跟着变	SVG 里写死了 `width="24"`，不是 `1em`。	改成 `1em` 后跟随 `el-icon` 的 `size`。
图标颜色改不了	SVG 里写死了 `fill="#409eff"`。	改成 `currentColor`。
`circle` 按钮变成又宽又圆	里面放了文字。	只放图标即可。
loading 转圈时还能点	用了 `:loading` 但没在函数入口判重，或按钮其实是另一个元素。	加上入口判重后确实只触发一次。
省略号不出现	容器没有限制宽度（`max-width`）。	加宽度限制后出现省略号。
`el-text` 的 `truncated` 无效	它是块级截断，父元素需要 `display: inline-block` 或固定宽度。	设置后生效。

排错口诀

图标不变，查 em 和 currentColor； 按钮转圈还点得动，入口少了一句 return； 省略号不出来，是没给宽度； 一屏 primary 太多，等于没有重点。

不要用这些办法“修复”

不要用 !important 去强改按钮颜色。要换颜色应该用 type，或用 CSS 变量（第 37 课会讲）。
不要把危险操作的样式改成红色就算完——更要紧的是加二次确认（第 19 课）。
不要给所有文字都加省略号。短文本加省略号会莫名多出一截空白，只在确实可能超长的地方用。

需要老师帮忙时交这些

出问题的标签代码、图标的引入方式、控制台报错原文、你期望的样式与实际样式（最好截图）。

老师巡视时只问三句话

这个按钮为什么用这个 type？（能说出语义）
这个提交按钮怎么防止用户连点两次？（能说出 loading + 入口判重）
这个图标改 size 会跟着变吗？为什么？（能说出 1em 的作用）

来源：本课自编 Vue 3 前端核心技能实训 · 语法依据 Vue 3.5 官方文档 · 组件依据 Element Plus 2.8 官方文档

第7/7页 · 用自己的话讲一遍

回到第 3 页：你刚才猜对了吗？

为什么 loading 之外还要在函数入口判重？

参考解释：loading 拦的是“按钮的再次点击”，但拦不住“同一瞬间的第二次触发”，也拦不住别的入口（例如表单回车、快捷键、父子组件同时调用）。在函数最前面判断一次状态，是最省事、最可靠的一道保险。

回答本课的两个问题

问题	参考解释
按钮类型怎么影响可用性？	类型不是装饰。它决定了用户的注意力分配：一屏里唯一的 `primary` 就是主操作，`danger` 让用户在手按下去之前多犹豫一下。
图标为什么推荐用官方图标包？	种类齐全、风格统一、能自动跟随组件尺寸。内联 SVG 只在“不想装额外依赖”时作为替代。

五个必须能答上来的问题

考考自己	可以这样通俗回答
危险操作用什么按钮？	`type="danger"`，并且配二次确认。
`plain` 是什么意思？	朴素样式：浅底深字，用于次要操作。
图标大小为什么写 `1em`？	让它跟随父级字号/`size`，实现等比缩放。
超长文本正确做法是什么？	省略号 + `el-tooltip` 提示，两者配合。
`el-space` 比手写 margin 好在哪？	间距统一、不会出现最后一个元素多出边距的问题。

一分钟现场演示指南

演示语义：把一屏按钮里的 primary 只留一个，让学生立刻感觉“重点清楚了”。
演示防重复：连点 loading 按钮，说明只有一个请求发出。
演示省略号：先不包 el-tooltip，说“用户看不到全文”；再包上，说“这才是完整方案”。
收尾一句：“按钮和文字是页面的语气，用对了，页面就专业了一半。”

交作业前最后检查

src/App.vue 与 练习记录.md 已保存。
至少三种按钮形态可见，且有一个带 loading 的提交按钮。
图标至少三处，且能随 size / color 变化。
长文本有省略号与提示。
Console 无红色报错。

课后再做一个小对照

把本课页面里所有 el-button 的 type 统计一遍，写下每个按钮为什么用这个类型。然后把其中一个改成 link，观察“同一屏的视觉重量”有没有变化。写下一句话：按钮类型的本质是在控制什么（提示：注意力的分配）。

来源：本课自编 Vue 3 前端核心技能实训 · 语法依据 Vue 3.5 官方文档 · 组件依据 Element Plus 2.8 官方文档

返回模块总览返回服务器中心