React - 引导步骤(IntroJs)

大众北漂的生活

原文链接：http://www.pianshen.com/article/9144689534/

 

在Antd中尝试写了一下, 感觉还可以, 配合后端来判断是否是新用户从而可以对新用户进行引导操作.

 

效果:

IntroJs引导步骤

给用户提示或介绍如何操作

何时使用

用户初次使用时

如何使用

npm install intro.js –save

代码演示

开始引导

基本用法

最简单的用法。

 1 import React from 'react'
 2         import IntroJs from 'intro.js'
 3         import { Card, Tooltip, Button } from 'antd';
 4 
 5         class IntroPage extends React.Component {
 6 
 7             startIntro = () => {
 8                 // 获取包含引导元素的父容器, 并组成IntroJs
 9                 var intro1 = IntroJs(document.getElementById('root'))
10                 intro1.setOptions({
11                     prevLabel: "上一步",
12                     nextLabel: "下一步",
13                     skipLabel: "跳过",
14                     doneLabel: "结束",
15                 }).oncomplete(function () {
16                     //点击跳过按钮后执行的事件
17                 }).onexit(function () {
18                     //点击结束按钮后， 执行的事件
19                 }).start();
20             }
21 
22             // render
23             // 关键是data-step 和 data-intro
24             render() {
25                 return (
26                     <div id='root'>
27                         <Card bordered={true} style={{ width: '100%' }} data-step="1" data-intro='开始引导!'>
28                             <Button onClick={() => this.startIntro()}>开始引导</Button>
29                         </Card>
30                     </div>
31                 );
32             }
33         }
34         
35         export default IntroPage

 

API

IntroJs Props

参数	说明	类型	默认值
start	开始引导	func
exit	退出引导	func
clone	克隆	func
exit	退出引导	func
goToStepNumber	跳转到第x引导步骤	func | (stepId: number)
goToStep	跳转到第x引导步骤	func | (step: number)
nextStep	下一步	func
previousStep	上一步	func
refresh	重置	func
setOption	设置引导步骤选项	func | (option: string, value: string|number|boolean)
setOptions	设置引导步骤选项	func | options: Options
onexit	退出引导回调	func | callback: Function
onbeforechange	在元素变化之前	func | callback: (element: HTMLElement) => any
onafterchange	在元素变化之后	func | callback: (element: HTMLElement) => any
onchange	变化时回调	func | callback: (element: HTMLElement) => any
oncomplete	完成时回调	func | callback: Function
addHints	添加提示	func
showHint	显示stepId提示	func | stepId: number
showHints	显示提示	func
hideHint	隐藏stepId提示	func | stepId: number
hideHints	隐藏提示	func
removeHint	删除stepId提示	func | stepId: number
removeHints	删除提示	func
onhintsadded		func | callback: Function
onhintclick		func | callback: (hintElement: HTMLElement, item: Step, stepId: number) => any
onhintclose		func | callback: (stepId: number) => any

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Options Props

参数	说明	类型	默认值
nextLabel	下一步标签名称	string
prevLabel	上一步标签名称	string
skipLabel	跳过标签名称	string
doneLabel	结束标签名称	string	Done
hidePrev	是否隐藏上一步	boolean
hideNext	是否隐藏下一步	boolean
tooltipPosition	提示框位置	string
highlightClass	高亮...	string
exitOnEsc	是否按esc退出引导	boolean
exitOnOverlayClick	是否点击遮盖层退出引导	boolean
showStepNumbers	是否展示第几步	boolean
keyboardNavigation	是否用键盘导航	boolean
showButtons	是否展示button按钮	boolean
showBullets	是否展示公告	boolean
showProgress	是否展示引导进度条	boolean	false
scrollToElement	是否滚动到展示的元素上(貌似无效)	boolean	true
overlayOpacity	遮盖层透明度	number
scrollPadding	滚动间距	number
positionPrecedence	位置优先??	string[]
disableInteraction	禁用交互	boolean
hintPosition	提示位置	string
hintButtonLabel	提示按钮标签	string
hintAnimation	删除动画	boolean
steps	步骤	Step[]
hints?	提示	Hint[]

来源：https://www.cnblogs.com/nlyangtong/p/11940070.html