内置组件库

Slidev 内置一批即插即用组件：嵌入推文、视频、动图、箭头、图表、PDF——无需安装任何依赖。

组件总览

组件	用途
<Tweet />	嵌入推文
<YouTube />	嵌入 YouTube 视频
<Giphy />	嵌入 Giphy 动图
<Arrow />	页面上绘制箭头
<Chart />	内置图表（ECharts）
<Videos />	本地/远程视频
<PDF />	内嵌 PDF 文档

社交内容组件

Tweet 推文

<Tweet id="1234567890" />

通过推文 ID 嵌入，渲染为卡片样式，展示推文内容与作者。

YouTube 视频

<YouTube id="dQw4w9WgXcQ" />

通过视频 ID 嵌入 YouTube 播放器，可在幻灯片内直接播放。

Giphy 动图

<Giphy id="abc123" />

通过 Giphy ID 嵌入动图，适合活跃气氛。

标注组件

Arrow 箭头

<Arrow x1="10" y1="10" x2="90" y2="90" />

在页面上从起点到终点画箭头，适合标注图表、截图重点：

属性	含义
x1 / y1	起点坐标（百分比）
x2 / y2	终点坐标（百分比）
color	颜色
width	线宽

<Arrow x1="20" y1="30" x2="80" y2="70" color="red" width="3" />

图表组件

Chart 图表

<Chart type="bar" :data="[5, 8, 3, 10]" />

基于 ECharts 的声明式图表：

属性	含义
type	图表类型：bar / line / pie 等
data	数据数组
labels	标签数组
title	标题

<Chart type="line" :data="[1, 3, 2, 5]" :labels="['一','二','三','四']" />

媒体组件

Videos 视频

<Videos src="/demo.mp4" />

支持本地与远程视频，可选 poster 封面：

<Videos src="/demo.mp4" poster="/poster.png" />

PDF 文档

<PDF url="/guide.pdf" />

内嵌 PDF 文档，观众可在幻灯片内翻页阅读：

属性	含义
url	PDF 地址
page	初始页码
width / height	显示尺寸

组件选型速查

场景	组件
引用推文	<Tweet id="..." />
播放视频	<YouTube id="..." /> 或 <Videos src="..." />
活跃气氛动图	<Giphy id="..." />
标注截图重点	<Arrow x1 y1 x2 y2 />
数据可视化	<Chart type data />
嵌入文档	<PDF url="..." />

使用注意

注意	说明
网络依赖	Tweet/YouTube/Giphy/PDF 远程资源需要网络
组件命名	标签需与组件名完全匹配（大小写敏感）
图表数据	:data 用 Vue 绑定语法传数组
本地化	离线演示把远程资源下载到本地

内置组件覆盖社交、媒体、图表、标注等高频需求；组件能力不足时，用 components/ 目录开发自定义组件（见「自定义组件开发」）。