GuideTour 新手引导

蒙层与自定义卡片的引导组件

何时使用

适用于页面上关键功能的介绍。

代码示例

基本使用

属性

GuideTour

interface IStep {
/** 图片地址 */
imageUrl: string;
/** 图片模式,同 image 的 mode */
imageMode?: string;
/** 图片内联样式 */
imageStyle?: string;
/** 距离顶部距离,单位px */
top?: number;
/** 距离左边距离,单位px */
left?: number;
}

属性类型必填默认值说明
stepsIStep[][]步骤信息
visiblebooleanfalse引导是否可见, 受控
indexnumber0当前步骤
swiperablebooleanfalse是否开启滑动模式
onChange(index: number) => void | boolean-步骤改变回调,返回false时阻止默认步骤改变
onCancel() => void-关闭回调
classNamestring-类名

插槽

名称说明
step-{{index}}自定义内容插槽

样式类

GuideTour

类名说明
amd-guide-tour整体样式
amd-guide-tour-clear关闭按钮样式
amd-guide-tour-indicator进度标志整体样式
amd-guide-tour-button按钮组整体样式
amd-guide-tour-item步骤整体样式
amd-guide-tour-item-img图片样式