漫游式引导

HiIntro 漫游式引导组件，用于生成界面操作指引

安装方式

pnpm add pangea-component

基本使用

import createInto from "pangea-component/hi-intro";
import "pangea-component/dist/style.css";

const steps = [
  {
    element: ".test1",
    title: "引导一",
    intro: "xxxxxxxxx",
  },
  {
    element: ".test2",
    title: "引导二",
    intro: "xxxxxxxxx",
  },
];

const options = {
  theme: "dark",
};

createInto(steps, options);

注意

调用createInto生成引导组件时要确保element对应的元素已渲染

API

名称	描述	参数
createInto	创建引导式组件	steps: Step[], options: Options

• steps: 引导步骤配置
• Options: 引导组件基础信息配置

配置参数

Step

参数名	描述	类型	默认值
title	标题	string	-
intro	介绍内容	string	-
element	当前步骤高亮元素	Element / string	-
width	气泡弹窗宽度	string	-
buttons	自定义按钮	Button[]	-

Options

参数名	描述	类型	默认值
theme	主题色	"light" | "dark"	"light"
animate	动画	boolean	true
showProgress	显示进度	boolean	true
nextBtnText	下一步按钮文案	string	下一步
prevBtnText	上一步按钮文案	string	上一步
doneBtnText	完成按钮文案	string	完成
smoothScroll	是否滚动到高亮元素	boolean	true
allowClose	允许关闭	boolean	true
overlayClickBehavior	点击背景时的行为	"close" | "nextStep"	"nextStep"
showSkip	是否显示跳过按钮	boolean	false
skipText	跳过按钮文案	string	跳过
onChange	步骤切换时	(step: number) => void	-
onBeforeDestroy	引导组件销毁前	(params: {destroy: () => void;step: number }) => void	-
onDestroy	组件销毁后触发	() => void	-

Button

参数名	描述	类型	默认值
text	按钮名称	string	-
type	按钮类型	"primary" | "secondary"	"secondary"
action	点击按钮触发动作	(params: { destroy:() => void; stepNext: () => void; stepPrev: () => void; stepTo: (index: number) => void ; step: number; }) => void	-

低代码页面内使用方式

将createInto方法通过ctxInjected注册到 ctx.injected对象中

常见场景配置

一、控制引导组件只显示一次

import createInto from "pangea-component/hi-intro";
import "pangea-component/dist/style.css";

const steps = [
  {
    element: ".test1",
    title: "引导一",
    intro: "xxxxxxxxx",
  },
  {
    element: ".test2",
    title: "引导二",
    intro: "xxxxxxxxx",
  },
];

const options = {
  onDestroy() {
    localStorage.setItem("showIntro", "true")
  }
};

if (localStorage.getItem("showIntro") !== "true") {
  createInto(steps, options);
}

二、引导组件销毁前添加确认弹窗

import createInto from "pangea-component/hi-intro";
import "pangea-component/dist/style.css";

const steps = [
  {
    element: ".test1",
    title: "引导一",
    intro: "xxxxxxxxx",
  },
  {
    element: ".test2",
    title: "引导二",
    intro: "xxxxxxxxx",
  },
];

const options = {
  onBeforeDestroy({destroy}) {
    if (window.confirm("确认关闭吗？")) {
      destroy()
    }
};
createInto(steps, options);