Guide 引导

用于引导用户了解产品功能的气泡提示组件

用于引导用户了解产品功能的气泡提示组件

演示

9:41

代码示例

<!-- 默认引导 -->
  <re-button theme="primary" @click="showDefault = true">打开引导</re-button>
  <re-guide :visible="showDefault" @update:visible="showDefault = $event" :steps="basicSteps" title="功能引导" bodyContent="这是功能引导说明文字" />

<!-- 多步骤引导 -->
  <re-button theme="primary" @click="showSteps = true">打开引导</re-button>
  <re-guide :visible="showSteps" @update:visible="showSteps = $event" :steps="multiSteps" :current="1" />

<!-- 隐藏计数器 -->
  <re-button theme="primary" @click="showHideCounter = true">打开引导</re-button>
  <re-guide :visible="showHideCounter" @update:visible="showHideCounter = $event" :steps="basicSteps" :hideCounter="true" title="隐藏计数器" bodyContent="无计数器显示" />

<!-- 隐藏跳过按钮 -->
  <re-button theme="primary" @click="showHideSkip = true">打开引导</re-button>
  <re-guide :visible="showHideSkip" @update:visible="showHideSkip = $event" :steps="basicSteps" :hideSkip="true" title="隐藏跳过" bodyContent="无跳过按钮" />

<!-- 自定义标题 -->
  <re-button theme="primary" @click="showCustomTitle = true">打开引导</re-button>
  <re-guide :visible="showCustomTitle" @update:visible="showCustomTitle = $event" :steps="basicSteps" title="自定义引导标题" bodyContent="自定义标题内容" />

<!-- 最后一步显示完成 -->
  <re-button theme="primary" @click="showLastStep = true">打开引导</re-button>
  <re-guide :visible="showLastStep" @update:visible="showLastStep = $event" :steps="multiSteps" :current="2" />

<!-- 第一步不显示上一步 -->
  <re-button theme="primary" @click="showFirstStep = true">打开引导</re-button>
  <re-guide :visible="showFirstStep" @update:visible="showFirstStep = $event" :steps="multiSteps" :current="0" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-guide />。

API

Guide Props

名称类型默认值描述必传
visiblebooleanfalse是否显示引导N
stepsArray<GuideStep>引导步骤列表N
currentnumber0当前步骤索引N
hideCounterbooleanfalse是否隐藏计数器N
hideSkipbooleanfalse是否隐藏跳过按钮N
titlestring""默认标题N
bodyContentstring""默认内容N
highlightPaddingnumber8高亮区域内边距N
zindexnumber9999元素层级N
customStylestring""自定义样式N

Guide Events

名称参数描述
update:visiblevalue: boolean显隐变化时触发
update:currentvalue: number-
changecurrent: number值变化时触发
skip-跳过时触发
done-完成时触发
finish-完成时触发

Guide Slots

名称描述
--