Element Plus 学习宝典

简体中文

English

简体中文

English

主题

Text 文本组件 ​

学习目标 ​

  • 掌握 Text 文本组件的基础用法
  • 理解文本类型和样式控制
  • 学会使用文本截断和省略号功能
  • 能够创建美观的文本界面

详细学习内容 ​

1. Text 文本组件 ​

1.1 基础用法 ​

Text 组件用于显示文本内容，支持多种类型和样式。

vue
<template>
  <div class="text-demo">
    <!-- 基础文本 -->
    <el-text>默认文本</el-text>
    
    <!-- 不同类型的文本 -->
    <el-text type="primary">主要文本</el-text>
    <el-text type="success">成功文本</el-text>
    <el-text type="info">信息文本</el-text>
    <el-text type="warning">警告文本</el-text>
    <el-text type="danger">危险文本</el-text>
  </div>
</template>

<style>
.text-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

1.2 文本大小 ​

vue
<template>
  <div class="text-size-demo">
    <el-text size="large">大号文本</el-text>
    <el-text>默认文本</el-text>
    <el-text size="small">小号文本</el-text>
  </div>
</template>

1.3 文本截断 ​

vue
<template>
  <div class="text-truncate-demo">
    <!-- 单行截断 -->
    <el-text truncated style="width: 200px;">
      这是一段很长的文本内容，会被截断显示省略号
    </el-text>
    
    <!-- 多行截断 -->
    <el-text 
      :line-clamp="2" 
      style="width: 200px;"
    >
      这是一段很长的文本内容，支持多行显示，超出指定行数后会被截断并显示省略号
    </el-text>
  </div>
</template>

1.4 文本标签 ​

vue
<template>
  <div class="text-tag-demo">
    <el-text tag="p">段落文本</el-text>
    <el-text tag="span">行内文本</el-text>
    <el-text tag="div">块级文本</el-text>
    <el-text tag="b">粗体文本</el-text>
    <el-text tag="i">斜体文本</el-text>
  </div>
</template>

2. 高级文本应用 ​

2.1 文本状态控制 ​

vue
<template>
  <div class="text-state-demo">
    <h3>文本状态</h3>
    
    <!-- 禁用状态 -->
    <div class="state-group">
      <h4>禁用状态</h4>
      <el-text disabled>禁用的文本</el-text>
      <el-text type="primary" disabled>禁用的主要文本</el-text>
      <el-text type="success" disabled>禁用的成功文本</el-text>
    </div>
    
    <!-- 加载状态 -->
    <div class="state-group">
      <h4>加载状态</h4>
      <el-text v-loading="loading">加载中的文本</el-text>
      <el-button @click="toggleLoading">切换加载状态</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)

const toggleLoading = () => {
  loading.value = !loading.value
}
</script>

<style>
.text-state-demo {
  margin-bottom: 32px;
}

.state-group {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.state-group h4 {
  margin-bottom: 12px;
  color: #409eff;
}
</style>

2.2 文本样式定制 ​

vue
<template>
  <div class="text-custom-demo">
    <h3>自定义文本样式</h3>
    
    <!-- 自定义颜色 -->
    <div class="custom-group">
      <h4>自定义颜色</h4>
      <el-text style="color: #ff6b6b;">红色文本</el-text>
      <el-text style="color: #4ecdc4;">青色文本</el-text>
      <el-text style="color: #45b7d1;">蓝色文本</el-text>
      <el-text style="color: #96ceb4;">绿色文本</el-text>
    </div>
    
    <!-- 自定义字体 -->
    <div class="custom-group">
      <h4>自定义字体</h4>
      <el-text class="custom-font-1">自定义字体样式 1</el-text>
      <el-text class="custom-font-2">自定义字体样式 2</el-text>
      <el-text class="custom-font-3">自定义字体样式 3</el-text>
    </div>
    
    <!-- 文本装饰 -->
    <div class="custom-group">
      <h4>文本装饰</h4>
      <el-text class="underline">下划线文本</el-text>
      <el-text class="strikethrough">删除线文本</el-text>
      <el-text class="overline">上划线文本</el-text>
    </div>
  </div>
</template>

<style>
.text-custom-demo {
  margin-bottom: 32px;
}

.custom-group {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.custom-group h4 {
  margin-bottom: 12px;
  color: #409eff;
}

.custom-group .el-text {
  display: block;
  margin-bottom: 8px;
}

.custom-font-1 {
  font-family: 'Georgia', serif;
  font-style: italic;
}

.custom-font-2 {
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

.custom-font-3 {
  font-family: 'Arial', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.underline {
  text-decoration: underline;
}

.strikethrough {
  text-decoration: line-through;
}

.overline {
  text-decoration: overline;
}
</style>

2.3 响应式文本 ​

vue
<template>
  <div class="responsive-text-demo">
    <h3>响应式文本</h3>
    
    <div class="responsive-container">
      <el-text class="responsive-title">
        响应式标题文本
      </el-text>
      
      <el-text class="responsive-content">
        这是响应式的内容文本。在不同的屏幕尺寸下，文字大小会自动调整以确保最佳的阅读体验。
        在移动设备上文字会相对较小，在桌面设备上会相对较大。
      </el-text>
      
      <el-text class="responsive-caption">
        响应式说明文字
      </el-text>
    </div>
  </div>
</template>

<style>
.responsive-text-demo {
  margin-bottom: 32px;
}

.responsive-container {
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
}

/* 基础样式（移动优先） */
.responsive-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #303133;
}

.responsive-content {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #606266;
}

.responsive-caption {
  display: block;
  font-size: 12px;
  color: #909399;
}

/* 平板样式 */
@media (min-width: 768px) {
  .responsive-title {
    font-size: 20px;
  }
  
  .responsive-content {
    font-size: 15px;
    line-height: 1.7;
  }
  
  .responsive-caption {
    font-size: 13px;
  }
}

/* 桌面样式 */
@media (min-width: 1024px) {
  .responsive-title {
    font-size: 24px;
    margin-bottom: 16px;
  }
  
  .responsive-content {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 12px;
  }
  
  .responsive-caption {
    font-size: 14px;
  }
}
</style>

3. 综合应用示例 ​

3.1 文章内容展示 ​

这个示例展示了如何使用 el-text 组件来构建一个完整的文章页面。

vue
<template>
  <div class="article-demo">
    <article class="article">
      <!-- 文章头部 -->
      <header class="article-header">
        <el-text tag="h1" class="article-title">
          Element Plus Text 组件完全指南
        </el-text>
        
        <div class="article-meta">
          <el-text class="meta-item">
            <el-icon><Document /></el-icon>
            技术文档
          </el-text>
          <el-text class="meta-item">
            <el-icon><Calendar /></el-icon>
            2024年1月15日
          </el-text>
          <el-text class="meta-item">
            <el-icon><User /></el-icon>
            Element Plus 团队
          </el-text>
        </div>
      </header>
      
      <!-- 文章内容 -->
      <main class="article-content">
        <el-text tag="p" class="lead-text">
          Text 组件是 Element Plus 中最基础也是最重要的组件之一。
          它提供了丰富的文本展示功能，支持多种类型、大小和样式。
        </el-text>
        
        <el-text tag="h2" class="section-title">
          主要特性
        </el-text>
        
        <el-text tag="p" class="content-text">
          Text 组件具有以下主要特性：
        </el-text>
        
        <ul class="feature-list">
          <li>
            <el-text type="primary">多种类型支持</el-text>
            <el-text>：支持 primary、success、warning、danger、info 等类型</el-text>
          </li>
          <li>
            <el-text type="success">灵活的大小控制</el-text>
            <el-text>：提供 large、default、small 三种尺寸</el-text>
          </li>
          <li>
            <el-text type="warning">文本截断功能</el-text>
            <el-text>：支持单行和多行文本截断</el-text>
          </li>
          <li>
            <el-text type="info">标签自定义</el-text>
            <el-text>：可以渲染为任意 HTML 标签</el-text>
          </li>
        </ul>
        
        <el-text tag="h2" class="section-title">
          使用建议
        </el-text>
        
        <el-text tag="p" class="content-text">
          在实际项目中，建议根据内容的重要性和语义来选择合适的文本类型和样式。
          对于重要信息使用 primary 类型，成功状态使用 success 类型，
          警告信息使用 warning 类型，错误信息使用 danger 类型。
        </el-text>
        
        <div class="code-example">
          <el-text tag="h3" class="example-title">代码示例</el-text>
          <el-text tag="pre" class="code-block">
&lt;el-text type="primary"&gt;重要信息&lt;/el-text&gt;
&lt;el-text type="success"&gt;操作成功&lt;/el-text&gt;
&lt;el-text type="warning"&gt;注意事项&lt;/el-text&gt;
&lt;el-text type="danger"&gt;错误提示&lt;/el-text&gt;
          </el-text>
        </div>
      </main>
      
      <!-- 文章底部 -->
      <footer class="article-footer">
        <el-text class="footer-text">
          希望这篇文章能帮助你更好地理解和使用 Element Plus 的 Text 组件。
        </el-text>
        
        <div class="tags">
          <el-text class="tag">Element Plus</el-text>
          <el-text class="tag">Text 组件</el-text>
          <el-text class="tag">前端开发</el-text>
          <el-text class="tag">Vue.js</el-text>
        </div>
      </footer>
    </article>
  </div>
</template>

<script setup>
import { Document, Calendar, User } from '@element-plus/icons-vue'
</script>

<style>
.article-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

.article {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

/* 文章头部 */
.article-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.article-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #303133;
  margin-bottom: 16px;
}

.article-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #909399;
}

/* 文章内容 */
.article-content {
  line-height: 1.8;
}

.lead-text {
  font-size: 18px;
  font-weight: 500;
  color: #409eff;
  margin-bottom: 24px;
  padding: 16px;
  background-color: #ecf5ff;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 24px 0 12px 0;
}

.content-text {
  color: #606266;
  margin-bottom: 16px;
}

.feature-list {
  margin: 16px 0;
  padding-left: 0;
  list-style: none;
}

.feature-list li {
  margin-bottom: 8px;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #e4e7ed;
}

.code-example {
  margin: 24px 0;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.example-title {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 12px;
}

.code-block {
  background-color: #282c34;
  color: #abb2bf;
  padding: 16px;
  border-radius: 6px;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 0;
}

/* 文章底部 */
.article-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.footer-text {
  color: #606266;
  margin-bottom: 16px;
  font-style: italic;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  padding: 4px 12px;
  background-color: #f0f2f5;
  color: #606266;
  border-radius: 16px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.tag:hover {
  background-color: #409eff;
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .article {
    padding: 20px;
  }
  
  .article-title {
    font-size: 22px;
  }
  
  .article-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .lead-text {
    font-size: 16px;
    padding: 12px;
  }
  
  .section-title {
    font-size: 18px;
  }
}
</style>

实践练习 ​

练习1：基础文本展示 ​

创建一个包含所有文本类型和大小的展示页面。

练习2：文本截断应用 ​

实现一个新闻列表，使用文本截断功能显示新闻摘要。

练习3：排版系统应用 ​

创建一个博客文章页面，应用完整的排版系统。

练习4：交互式文本组件 ​

实现一个可编辑的文本展示组件，支持切换编辑和预览模式。

设计原则 ​

  1. 可读性优先：确保文本具有良好的对比度和合适的字体大小
  2. 层次分明：使用不同的文本样式建立清晰的信息层次
  3. 一致性：保持整个应用中文本样式的一致性
  4. 语义化：使用合适的 HTML 标签和 ARIA 属性
  5. 响应式：确保文本在不同设备上都有良好的显示效果

学习资源 ​

作业 ​

  1. 基础作业：创建一个包含所有文本组件类型的展示页面
  2. 进阶作业：实现一个新闻文章页面，应用完整的排版系统
  3. 挑战作业：设计一个支持主题切换的文本展示组件

总结 ​

Text 文本组件和 Link 链接组件是构建用户界面的基础元素。通过合理使用这些组件，结合良好的排版原则，可以创建出既美观又易读的文本界面。掌握这些基础组件的使用方法，对于提升整体的用户体验具有重要意义。

学习日期： ___________ 完成状态： ___________ 学习笔记：

遇到的问题：

解决方案：

Element Plus Study Guide

Copyright © 2025 edlo.cn - Element Plus Study Guide