项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

Tour 新手引导 ​

分步引导组件:聚光遮罩高亮目标元素(超大 box-shadow 挖洞),卡片自动避让定位,滚动/缩放自动跟随。支持 v-model 步进、键盘操作(Esc 跳过、←→ 步进)。

基础用法 ​

用法说明 ​

vue
<eb-tour v-model="step" :steps="steps" @finish="onFinish" />

// steps: [{ target: '#id 或 Element', title, description }]

v-model 为当前步骤索引,置 -1 关闭;目标元素不存在时该步自动跳过定位。

Tour API ​

Props ​

名称类型默认值说明
stepsArray[]步骤定义 { target, title, description, placement? }
modelValueNumber-1当前步骤(v-model)
gapNumber8高亮框四周留白
mask-colorStringrgba(0,0,0,.5)遮罩颜色
close-on-maskBooleanfalse点击遮罩跳过
keyboardBooleantrue键盘步进/跳过
z-indexNumber3000层级

事件 ​

change(index)、finish、skip;插槽 title、default 自定义卡片内容。