用途:本技能用于在 Slidev 幻灯片中使用 Vue 组件,添加交互元素、使用内置组件、创建自定义 Vue 组件、构建可复用的演示元素以及添加动态内容。组件可直接在 Markdown 中使用。
主要能力:内置组件包括 Arrow(在两点间画箭头,支持 x1/y1/x2/y2/color/width)、VDragArrow(可拖拽箭头)、AutoFitText(自动调整字号,支持 max/min/modelValue)、LightOrDark(按主题渲染不同内容,提供 light/dark 插槽)、Link(跳转到指定幻灯片,如 <Link to="42">、<Link to="/intro">)、SlideCurrentNo/SlidesTotal(显示页码)、Toc(目录,支持 maxDepth 与 mode:all、onlyCurrentTree、onlySiblings)、Transform(CSS 变换,支持 scale/rotate)、Tweet(嵌入推文,支持 id/scale)、Youtube(嵌入视频,支持 id/width/height)、SlidevVideo(嵌入视频文件,支持 autoplay/controls/loop)、RenderWhen(按上下文条件渲染,context 可选 slide、presenter、previewNext、print)、VDrag(使元素可拖拽,支持 initialX/initialY)。动画组件包括 v-click(点击显示,支持 at)、v-clicks(依次显示子项,支持 depth/every)、v-after(与前一元素同时显示)、v-switch(按点击切换内容,使用 #1/#2/#3 模板)。
使用方式:在 components/ 目录创建 .vue 文件即可自动注册为组件;可使用 props、插槽、scoped 样式,并通过 @slidev/client 的 useNav、useSlideContext 访问导航与幻灯片上下文。global-top.vue 和 global-bottom.vue 可分别用于所有幻灯片上方和下方。
适用场景:需要交互式计数器、卡片、进度条、代码演示、社交链接、二维码等可复用演示元素时。
限制:资料未提供安装步骤、收费信息、平台要求或效果保证;部分细节(如组件自动注册的具体条件)暂未提供。创建组件时应保持简单、使用 props、使用 scoped 样式、添加使用注释,并在演讲者模式下测试交互性。