React - 引導步驟(IntroJs)

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

 

在Antd中嘗試寫了一下, 感覺還可以, 配合后端來判斷是否是新用戶從而可以對新用戶進行引導操作.

 

效果:

IntroJs引導步驟

給用戶提示或介紹如何操作

何時使用

用戶初次使用時

如何使用

npm install intro.js –save

代碼演示

開始引導

基本用法

最簡單的用法。

import React from 'react'
        import IntroJs from 'intro.js'
        import { Card, Tooltip, Button } from 'antd';

        class IntroPage extends React.Component {

            startIntro = () => {
                // 獲取包含引導元素的父容器, 並組成IntroJs
                var intro1 = IntroJs(document.getElementById('root'))
                intro1.setOptions({
                    prevLabel: "上一步",
                    nextLabel: "下一步",
                    skipLabel: "跳過",
                    doneLabel: "結束",
                }).oncomplete(function () {
                    //點擊跳過按鈕后執行的事件
                }).onexit(function () {
                    //點擊結束按鈕后， 執行的事件
                }).start();
            }

            // render
            // 關鍵是data-step 和 data-intro
            render() {
                return (
                    <div id='root'>
                        <Card bordered={true} style={{ width: '100%' }} data-step="1" data-intro='開始引導!'>
                            <Button onClick={() => this.startIntro()}>開始引導</Button>
                        </Card>
                    </div>
                );
            }
        }
        
        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[]