Element Plus 其他实用组件完全指南（10个核心组件）

摘要：本文详细介绍 Element Plus 组件库中的 10 个其他实用组件，包含 Carousel、Collapse、Timeline、Image 等常用组件。每个组件提供完整代码示例、核心 API 表格、实战场景及常见问题解答，帮助开发者掌握多样化 UI 功能的实现方法。

关键词：Vue3、Element Plus、走马灯、折叠面板、时间线、图片预览、无限滚动、前端开发

适合人群：Vue3 中高级开发者、需要实现多样化 UI 功能的开发者、前端工程师

阅读时间：约 25 分钟

版本信息：Element Plus 2.x | Vue 3.x | TypeScript

---

1. Carousel 走马灯

1.1 组件简介

Carousel 走马灯组件用于轮播展示图片或其他内容，常用于首页 Banner、产品展示等场景。

💡 提示 ：走马灯常用于首页 Banner 轮播，建议配合 Image 组件使用。

1.2 基础用法

<script setup lang="ts">
import { ref } from 'vue'

const images = ref([
  'https://example.com/banner1.jpg',
  'https://example.com/banner2.jpg',
  'https://example.com/banner3.jpg'
])
</script>

<template>
  <el-carousel height="400px">
    <el-carousel-item v-for="(img, index) in images" :key="index">
      <img :src="img" style="width: 100%; height: 100%; object-fit: cover" />
    </el-carousel-item>
  </el-carousel>
</template>

1.3 常用场景

1.3.1 自动播放与指示器

<template>
  <el-carousel
    :interval="4000"
    indicator-position="outside"
    arrow="always"
    height="300px"
  >
    <el-carousel-item v-for="item in 4" :key="item">
      <h3 style="text-align: center; line-height: 300px">第 {{ item }} 页</h3>
    </el-carousel-item>
  </el-carousel>
</template>

1.3.2 卡片化走马灯

<template>
  <el-carousel height="200px" type="card">
    <el-carousel-item v-for="item in 6" :key="item">
      <div style="text-align: center; padding: 20px">
        <h3>卡片 {{ item }}</h3>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

1.4 核心 API

属性名	类型	说明	默认值
height	string	走马灯高度	-
initial-index	number	初始激活的幻灯片索引	0
interval	number	自动轮播间隔（ms）	3000
autoplay	boolean	是否自动轮播	true
loop	boolean	是否循环轮播	true
direction	string	轮播方向	'horizontal'
indicator-position	string	指示器位置	'inside'
arrow	string	箭头显示时机	'hover'
type	string	走马灯类型	''

1.5 注意事项

1. height 必填：必须设置走马灯高度
2. 卡片模式 ：设置 type="card" 可开启卡片化效果
3. 性能优化：图片较多时建议懒加载

📚 官方文档 ：Carousel 走马灯 - Element Plus

---

2. Collapse 折叠面板

2.1 组件简介

Collapse 折叠面板用于收纳内容，支持手风琴模式（同时只展开一个面板）。

2.2 基础用法

<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref(['1'])
</script>

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="标题 1" name="1">
      <p>这是第一个折叠面板的内容</p>
    </el-collapse-item>
    <el-collapse-item title="标题 2" name="2">
      <p>这是第二个折叠面板的内容</p>
    </el-collapse-item>
    <el-collapse-item title="标题 3" name="3">
      <p>这是第三个折叠面板的内容</p>
    </el-collapse-item>
  </el-collapse>
</template>

2.3 常用场景

2.3.1 手风琴模式

<script setup lang="ts">
import { ref } from 'vue'

const activeName = ref('1')
</script>

<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item title="常见问题 1" name="1">
      <p>这是问题 1 的答案</p>
    </el-collapse-item>
    <el-collapse-item title="常见问题 2" name="2">
      <p>这是问题 2 的答案</p>
    </el-collapse-item>
    <el-collapse-item title="常见问题 3" name="3">
      <p>这是问题 3 的答案</p>
    </el-collapse-item>
  </el-collapse>
</template>

2.4 核心 API

属性名	类型	说明	默认值
v-model	Array/string	当前激活的面板	\[\]
accordion	boolean	是否手风琴模式	false

2.5 注意事项

1. accordion 模式 ：手风琴模式下 v-model 为字符串，否则为数组
2. name 唯一 ：每个面板的 name 必须唯一
3. 自定义标题 ：使用 title 插槽可自定义标题内容

📚 官方文档 ：Collapse 折叠面板 - Element Plus

---

3. Timeline 时间线

3.1 组件简介

Timeline 时间线用于展示事件发生的时间顺序，常用于日志、动态、版本更新等场景。

3.2 基础用法

<template>
  <el-timeline>
    <el-timeline-item timestamp="2024-01-01" placement="top">
      <el-card>
        <h4>版本 1.0 发布</h4>
        <p>初始版本发布</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2024-02-01" placement="top">
      <el-card>
        <h4>版本 1.1 发布</h4>
        <p>修复已知问题</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

3.3 常用场景

3.3.1 自定义节点颜色

<template>
  <el-timeline>
    <el-timeline-item timestamp="2024-01-01" color="#409eff">
      蓝色节点 - 正常事件
    </el-timeline-item>
    <el-timeline-item timestamp="2024-02-01" color="#67c23a">
      绿色节点 - 成功事件
    </el-timeline-item>
    <el-timeline-item timestamp="2024-03-01" color="#e6a23c">
      橙色节点 - 警告事件
    </el-timeline-item>
    <el-timeline-item timestamp="2024-04-01" color="#f56c6c">
      红色节点 - 错误事件
    </el-timeline-item>
  </el-timeline>
</template>

3.4 核心 API

属性名	类型	说明	默认值
timestamp	string	时间戳	''
placement	string	时间戳位置	'bottom'
type	string	节点类型	''
color	string	节点颜色	'#E4E7ED'
size	string	节点尺寸	'normal'
hollow	boolean	是否空心	false

3.5 注意事项

1. placement 属性 ：支持 top 和 bottom 两种位置
2. 自定义图标 ：使用 icon 属性可自定义节点图标
3. 配合卡片 ：常与 Card 组件配合使用

📚 官方文档 ：Timeline 时间线 - Element Plus

---

4. Divider 分割线

4.1 组件简介

Divider 分割线用于区隔内容区块，支持文字、虚线等样式。

4.2 基础用法

<template>
  <div>
    <p>这是一段文字</p>
    <el-divider />
    <p>这是另一段文字</p>
  </div>
</template>

4.3 常用场景

4.3.1 带文字的分割线

<template>
  <el-divider content-position="center">中间文字</el-divider>
  <el-divider content-position="left">左侧文字</el-divider>
  <el-divider content-position="right">右侧文字</el-divider>
</template>

4.3.2 虚线分割线

<template>
  <el-divider border-style="dashed">虚线分割线</el-divider>
  <el-divider border-style="dotted">点线分割线</el-divider>
</template>

4.4 核心 API

属性名	类型	说明	默认值
direction	string	分割线方向	'horizontal'
content-position	string	文字位置	'center'
border-style	string	边框样式	'solid'

4.5 注意事项

1. content-position ：支持 left、center、right
2. border-style ：支持 solid、dashed、dotted
3. 垂直分割线 ：设置 direction="vertical" 可用于菜单分隔

📚 官方文档 ：Divider 分割线 - Element Plus

---

5. Backtop 回到顶部

5.1 组件简介

Backtop 回到顶部组件用于在页面滚动到一定距离后显示，点击可快速回到页面顶部。

5.2 基础用法

<template>
  <div style="height: 2000px">
    <p>滚动页面查看效果</p>
  </div>
  <el-backtop :bottom="100" :right="100" />
</template>

5.3 核心 API

属性名	类型	说明	默认值
target	string	触发滚动的容器选择器	-
visibility-height	number	滚动高度达到此参数才显示	200
right	number	距离右侧距离	40
bottom	number	距离底部距离	40

5.4 注意事项

1. target 属性：默认监听 window 滚动，可指定容器
2. visibility-height：控制显示时机
3. 自定义内容：使用默认插槽可自定义按钮样式

📚 官方文档 ：Backtop 回到顶部 - Element Plus

---

6. InfiniteScroll 无限滚动

6.1 组件简介

InfiniteScroll 无限滚动用于滚动到底部时自动加载更多内容，常用于列表页、信息流等场景。

6.2 基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const count = ref(10)
const loading = ref(false)

const loadMore = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 5
    loading.value = false
    if (count.value >= 50) {
      ElMessage('没有更多内容了')
    }
  }, 1000)
}
</script>

<template>
  <ul
    v-infinite-scroll="loadMore"
    style="height: 400px; overflow: auto"
    class="infinite-list"
  >
    <li v-for="i in count" :key="i" class="infinite-list-item">
      内容 {{ i }}
    </li>
    <div v-if="loading" class="loading-text">加载中...</div>
  </ul>
</template>

<style scoped>
.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-item {
  padding: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.loading-text {
  text-align: center;
  padding: 10px;
  color: #909399;
}
</style>

6.3 核心 API

属性名	类型	说明	默认值
v-infinite-scroll	Function	滚动到底部时触发的回调	-
infinite-scroll-disabled	boolean	是否禁用	false
infinite-scroll-delay	number	节流延迟（ms）	200
infinite-scroll-distance	number	触发加载的距离阈值	0
infinite-scroll-immediate	boolean	是否立即执行加载	true

6.4 注意事项

1. 容器高度 ：滚动容器必须有固定高度和 overflow: auto
2. 节流控制 ：使用 infinite-scroll-delay 避免频繁触发
3. 加载状态：建议显示加载动画提升体验

📚 官方文档 ：InfiniteScroll 无限滚动 - Element Plus

---

7. Image 图片

7.1 组件简介

Image 图片组件用于展示图片，支持懒加载、预览、错误占位等功能。

7.2 基础用法

<template>
  <el-image
    src="https://example.com/image.jpg"
    fit="cover"
    style="width: 300px; height: 200px"
  />
</template>

7.3 常用场景

7.3.1 图片预览

<script setup lang="ts">
import { ref } from 'vue'

const images = ref([
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
])
</script>

<template>
  <el-image
    v-for="(img, index) in images"
    :key="index"
    :src="img"
    fit="cover"
    style="width: 200px; height: 150px; margin: 10px"
    :preview-src-list="images"
    :initial-index="index"
  />
</template>

7.3.2 懒加载与错误占位

<template>
  <el-image
    src="https://example.com/image.jpg"
    :lazy="true"
    fit="cover"
    style="width: 300px; height: 200px"
  >
    <template #placeholder>
      <div class="image-placeholder">加载中...</div>
    </template>
    <template #error>
      <div class="image-error">加载失败</div>
    </template>
  </el-image>
</template>

7.4 核心 API

属性名	类型	说明	默认值
src	string	图片地址	''
fit	string	填充模式	''
lazy	boolean	是否开启懒加载	false
preview-src-list	Array	预览图片列表	\[\]
initial-index	number	初始预览索引	0
hide-on-click-modal	boolean	点击遮罩关闭预览	false

7.5 注意事项

1. fit 属性 ：支持 fill、contain、cover、none、scale-down
2. 懒加载：需要配合滚动容器使用
3. 预览功能 ：设置 preview-src-list 即可开启预览

📚 官方文档 ：Image 图片 - Element Plus

---

8. Watermark 水印

8.1 组件简介

Watermark 水印组件用于在页面上添加文字或图片水印，常用于版权保护、数据防泄露等场景。

8.2 基础用法

<template>
  <el-watermark content="内部资料">
    <div style="height: 400px">
      <p>这是受保护的内容</p>
    </div>
  </el-watermark>
</template>

8.3 常用场景

8.3.1 自定义水印样式

<template>
  <el-watermark
    :content="['公司机密', '禁止外传']"
    :font="{ fontSize: 16, color: 'rgba(0, 0, 0, 0.15)' }"
    :rotate="-22"
    :gap="[100, 100]"
  >
    <div style="height: 400px">
      <p>这是受保护的内容</p>
    </div>
  </el-watermark>
</template>

8.4 核心 API

属性名	类型	说明	默认值
content	string/string\[\]	水印文字	''
font	object	字体样式	{}
rotate	number	旋转角度	-22
gap	number, number	水印间距	100, 100
offset	number, number	偏移量	0, 0

8.5 注意事项

1. content 数组：传入数组可显示多行水印
2. font 配置：可自定义字体大小、颜色、粗细
3. 性能考虑：大面积水印可能影响性能

📚 官方文档 ：Watermark 水印 - Element Plus

---

9. Tour 漫游式引导

9.1 组件简介

Tour 漫游式引导用于新手引导，通过分步提示帮助用户了解功能。

9.2 基础用法

<script setup lang="ts">
import { ref } from 'vue'

const tourVisible = ref(false)

const steps = [
  {
    target: () => document.querySelector('#step1'),
    title: '第一步',
    description: '这是第一个引导步骤'
  },
  {
    target: () => document.querySelector('#step2'),
    title: '第二步',
    description: '这是第二个引导步骤'
  }
]
</script>

<template>
  <div>
    <el-button id="step1" @click="tourVisible = true">开始引导</el-button>
    <el-button id="step2">第二步按钮</el-button>
    
    <el-tour v-model="tourVisible" :steps="steps" />
  </div>
</template>

9.3 核心 API

属性名	类型	说明	默认值
v-model	boolean	是否显示引导	false
steps	Array	引导步骤配置	\[\]
current	number	当前步骤索引	0
showClose	boolean	是否显示关闭按钮	true
mask	boolean	是否显示遮罩	true

9.4 注意事项

1. target 必填：每个步骤必须指定目标元素
2. 步骤配置 ：使用 steps 数组配置完整引导流程
3. 用户体验：建议提供跳过引导的选项

📚 官方文档 ：Tour 漫游式引导 - Element Plus

---

10. Anchor 锚点

10.1 组件简介

Anchor 锚点用于页面内导航，点击可快速滚动到对应位置。

10.2 基础用法

<template>
  <div style="display: flex">
    <el-anchor :offset="100">
      <el-anchor-link href="#section1">第一部分</el-anchor-link>
      <el-anchor-link href="#section2">第二部分</el-anchor-link>
      <el-anchor-link href="#section3">第三部分</el-anchor-link>
    </el-anchor>
    
    <div style="flex: 1; padding: 20px">
      <div id="section1" style="height: 500px">
        <h2>第一部分</h2>
        <p>这是第一部分的内容</p>
      </div>
      <div id="section2" style="height: 500px">
        <h2>第二部分</h2>
        <p>这是第二部分的内容</p>
      </div>
      <div id="section3" style="height: 500px">
        <h2>第三部分</h2>
        <p>这是第三部分的内容</p>
      </div>
    </div>
  </div>
</template>

10.3 核心 API

属性名	类型	说明	默认值
offset	number	触发滚动的偏移值	0
bounds	number	锚点区域边界	5
direction	string	锚点方向	'vertical'

10.4 注意事项

1. href 对应 ：锚点的 href 必须与目标元素的 id 对应
2. offset 属性：用于补偿固定头部等偏移
3. 滚动容器：默认监听 window 滚动，可自定义容器

📚 官方文档 ：Anchor 锚点 - Element Plus

---

💡 综合实战案例

图片展示页面

结合 Carousel、Image、Timeline、Divider、Backtop 等组件实现完整的图片展示页面。

<script setup lang="ts">
import { ref } from 'vue'

// 轮播图片
const bannerImages = ref([
  'https://example.com/banner1.jpg',
  'https://example.com/banner2.jpg',
  'https://example.com/banner3.jpg'
])

// 图片列表
const galleryImages = ref([
  { url: 'https://example.com/img1.jpg', title: '风景 1', date: '2024-01-01' },
  { url: 'https://example.com/img2.jpg', title: '风景 2', date: '2024-01-02' },
  { url: 'https://example.com/img3.jpg', title: '风景 3', date: '2024-01-03' },
  { url: 'https://example.com/img4.jpg', title: '风景 4', date: '2024-01-04' },
  { url: 'https://example.com/img5.jpg', title: '风景 5', date: '2024-01-05' },
  { url: 'https://example.com/img6.jpg', title: '风景 6', date: '2024-01-06' }
])

// 时间线数据
const timelineData = ref([
  { date: '2024-01-06', content: '上传了风景 6' },
  { date: '2024-01-05', content: '上传了风景 5' },
  { date: '2024-01-04', content: '上传了风景 4' }
])

// 预览图片列表
const previewList = ref(galleryImages.map(img => img.url))
</script>

<template>
  <div class="gallery-page">
    <!-- 轮播 Banner -->
    <el-carousel height="400px" class="banner">
      <el-carousel-item v-for="(img, index) in bannerImages" :key="index">
        <img :src="img" style="width: 100%; height: 100%; object-fit: cover" />
      </el-carousel-item>
    </el-carousel>

    <div class="content">
      <!-- 分割线 -->
      <el-divider content-position="left">图片画廊</el-divider>

      <!-- 图片网格 -->
      <div class="gallery-grid">
        <el-image
          v-for="(img, index) in galleryImages"
          :key="index"
          :src="img.url"
          fit="cover"
          class="gallery-item"
          :preview-src-list="previewList"
          :initial-index="index"
          lazy
        >
          <template #placeholder>
            <div class="image-placeholder">加载中...</div>
          </template>
        </el-image>
      </div>

      <!-- 分割线 -->
      <el-divider content-position="left">更新时间线</el-divider>

      <!-- 时间线 -->
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in timelineData"
          :key="index"
          :timestamp="item.date"
          placement="top"
        >
          <p>{{ item.content }}</p>
        </el-timeline-item>
      </el-timeline>
    </div>

    <!-- 回到顶部 -->
    <el-backtop :bottom="100" :right="100" />
  </div>
</template>

<style scoped>
.gallery-page {
  max-width: 1200px;
  margin: 0 auto;
}

.banner {
  margin-bottom: 30px;
}

.content {
  padding: 20px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.gallery-item {
  width: 100%;
  height: 250px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}
</style>

---

❓ 常见问题 FAQ

1. Carousel 如何实现手动控制？

解决方案 ：使用 ref 获取组件实例，调用 setActiveItem 方法。

<script setup lang="ts">
import { ref } from 'vue'

const carouselRef = ref()

const goToSlide = (index: number) => {
  carouselRef.value?.setActiveItem(index)
}
</script>

<template>
  <el-carousel ref="carouselRef">
    <!-- 轮播项 -->
  </el-carousel>
  <el-button @click="goToSlide(0)">第一页</el-button>
</template>

📖 扩展阅读 ：Carousel 官方文档

2. InfiniteScroll 如何停止加载？

解决方案 ：使用 infinite-scroll-disabled 属性控制。

<ul
  v-infinite-scroll="loadMore"
  :infinite-scroll-disabled="noMore"
>
  <!-- 列表项 -->
</ul>

<script setup lang="ts">
const noMore = ref(false)

const loadMore = () => {
  if (count.value >= 100) {
    noMore.value = true
  }
}
</script>

3. Image 预览如何自定义工具栏？

解决方案 ：目前 Element Plus 不支持自定义预览工具栏，建议使用第三方库如 viewerjs。

4. Tour 引导如何跳过并记录状态？

解决方案：使用 localStorage 记录用户是否已完成引导。

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const tourVisible = ref(false)

onMounted(() => {
  const hasSeenTour = localStorage.getItem('hasSeenTour')
  if (!hasSeenTour) {
    tourVisible.value = true
  }
})

const handleTourEnd = () => {
  localStorage.setItem('hasSeenTour', 'true')
}
</script>

<template>
  <el-tour v-model="tourVisible" @close="handleTourEnd" :steps="steps" />
</template>

5. Anchor 如何配合固定头部？

解决方案 ：使用 offset 属性补偿头部高度。

<el-anchor :offset="80">
  <el-anchor-link href="#section1">第一部分</el-anchor-link>
</el-anchor>

---

📝 总结

本文介绍了 Element Plus 的 10 个其他实用组件，涵盖走马灯、折叠面板、时间线、图片预览等常用场景。

组件使用频率

组件	使用频率	推荐指数
Image	⭐⭐⭐⭐⭐	必学
Carousel	⭐⭐⭐⭐	高频
Collapse	⭐⭐⭐⭐	高频
Divider	⭐⭐⭐⭐	高频
Backtop	⭐⭐⭐	常用
Timeline	⭐⭐⭐	常用
InfiniteScroll	⭐⭐⭐	常用
Watermark	⭐⭐	一般
Tour	⭐⭐	一般
Anchor	⭐⭐	一般

学习建议

1. 优先掌握 Image、Carousel、Collapse 三个高频组件
2. InfiniteScroll 适合列表页和信息流场景
3. Tour 和 Watermark 根据业务需求选择使用
4. 建议配合官方文档学习，获取最新 API 信息

---

📚 参考资料

相关技术文档

• Vue 3 官方文档
• TypeScript 官方文档
• @element-plus/icons-vue

---

📌 系列完结：本系列 6 篇文章已全部完成，涵盖 Element Plus 72 个核心组件的详细使用指南。

📚 系列导航 ：基础组件 | 表单组件上 | 表单组件下 | 数据展示组件 | 导航与反馈组件 | 其他实用组件