码云前端 2021-11-30

React实战项目做类似王者荣耀的新手引导功能

前言

笔者做这个新手指导调研了三个库，最终的效果的话感觉只有intro.js的效果最好，效果如下展示：

React新手指导最终效果

一、完整的代码

react 代码：

import React, { useState } from "react";
import { Steps, Hints } from "intro.js-react";

import "intro.js/introjs.css";
import "./index.css";

export default function App() {
    const [stepsEnabled, setStepsEnabled] = useState(true);
    const [steps, setSteps] = useState([
        {
            element: ".user-name",
            intro: "输入用户名"
        },
        {
            element: ".password",
            intro: "输入密码"
        },
        {
            element: ".test",
            intro: "最后点击这里提交"
        },
        {
            element: ".next_page",
            intro: "跳转页面"
        }
    ]);
    const [hintsEnabled, setHintsEnabled] = useState(true);
    const [hints, setHints] = useState([
        {
            element: ".user-name",
            hint: "Hello hint",
            hintPosition: "middle-right"
        }
    ]);

    function onExit() {
        setStepsEnabled(false);
    }

    function toggleSteps() {
        setStepsEnabled(!stepsEnabled)
    }

    function addStep() {
        const newStep = {
            element: ".test-add",
            intro: "Test step"
        };
        setSteps([...steps, newStep]);
    }

    function toggleHints() {
        setHintsEnabled(!hintsEnabled)
    }

    function addHint() {
        const newHint = {
            element: ".test",
            hint: "Test hint",
            hintPosition: "middle-right"
        };
        setHints([...hints, newHint]);
    }

    return (
        <div>
            <Steps
                enabled={stepsEnabled}
                steps={steps}
                initialStep={0}
                onExit={() => onExit()}
            />
            <Hints enabled={hintsEnabled} hints={hints} />

            <div className="controls">
                <div>
                    <button onClick={() => toggleSteps()}>Toggle Steps</button>
                    <button onClick={() => addStep()}>Add Step</button>
                </div>
                <div>
                    <button onClick={() => toggleHints()}>Toggle Hints</button>
                    <button onClick={() => addHint()}>Add Hint</button>
                </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
                <div className="inputBox">用户名： <input className="user-name" type="text"/></div>
                <br/>
                <div className="inputBox">密__码： <input className="password" type="password"/></div>
                <hr />
                <button className="test">提交</button>
            </div>
        </div>
    );
}

css代码：

.controls {
  border-bottom: 1px solid black;
  padding: 10px;
  background-color: Gainsboro;
}

.controls > div {
  margin-bottom: 10px;
}

.controls > div:last-child {
  margin-bottom: 0px;
}

.controls button {
  outline: 0;
  cursor: pointer;
  width: 150px;
  height: 30px;
  font-size: .85rem;
  border: 1px solid RoyalBlue;
  background-color: LightSteelBlue;
  margin-right: 10px;
  font-weight: bold;
  border-radius: 3px;
}

.controls button:hover {
  color: Snow;
  background-color: RoyalBlue;
}

.inputBox {
  width: 50%;
}
.inputBox input {
  width: 80%;
}
button {
  width: 50%;
}

二、代码解析

1. 首先我们是需要先安包的：

npm install intro.js intro.js-react -S
// or
cnpm install intro.js intro.js-react -S
// or
yarn add intro.js intro.js-react -S

2. 安包之后需要进行一个引入：

import React, { useEffect, useState } from "react";
import { Steps, Hints } from "intro.js-react"; // 引入我们需要的组件

import "intro.js/introjs.css"; // 引入 introjs 的样式
import "./index.css"; // 引入我们自己的样式

3. 然后我们初始化四个状态

// 控制是否开启新手指导的
const [stepsEnabled, setStepsEnabled] = useState(true);
// 一共有哪些步骤，对应的步骤应该指向的元素以及应该显示的文字
const [steps, setSteps] = useState([
    {
        element: ".user-name",
        intro: "输入用户名"
    },
    {
        element: ".password",
        intro: "输入密码"
    },
    {
        element: ".test",
        intro: "最后点击这里提交"
    },
    {
        element: ".next_page",
        intro: "跳转页面"
    }
]);
// 是否开启提示的
const [hintsEnabled, setHintsEnabled] = useState(true);
// 设置哪些需要提示
const [hints, setHints] = useState([
    {
        element: ".user-name",
        hint: "Hello hint",
        hintPosition: "middle-right"
    }
]);

4. 新手指导弹窗的效果：

新手提示的效果：

5. 控制状态

// 将步骤关掉
function onExit() {
    setStepsEnabled(false);
}
// 设置是否开始引导
function toggleSteps() {
    setStepsEnabled(!stepsEnabled)
}
// 增加引导部署
function addStep() {
    const newStep = {
        element: ".test-add", // 这里应该是动态的哈
        intro: "Test step" // 这里应该是动态的哈
    };
    setSteps([...steps, newStep]);
}
// 控制是否提示
function toggleHints() {
    setHintsEnabled(!hintsEnabled)
}
// 增加提示
function addHint() {
    const newHint = {
        element: ".test", // 这里应该是动态的哈
        hint: "Test hint", // 这里应该是动态的哈
        hintPosition: "middle-right" // 这里应该是动态的哈
    };
    setHints([...hints, newHint]);
}

6. return 一个组件

<div>
   <Steps
       enabled={stepsEnabled}
       steps={steps}
       initialStep={0}
       onExit={() => onExit()}
   />
   <Hints enabled={hintsEnabled} hints={hints} />

   <div className="controls">
       <div>
           <button onClick={() => toggleSteps()}>Toggle Steps</button>
           <button onClick={() => addStep()}>Add Step</button>
       </div>
       <div>
           <button onClick={() => toggleHints()}>Toggle Hints</button>
           <button onClick={() => addHint()}>Add Hint</button>
       </div>
   </div>

   <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
       <div className="inputBox">用户名： <input className="user-name" type="text"/></div>
       <br/>
       <div className="inputBox">密__码： <input className="password" type="password"/></div>
       <hr />
       <button className="test">提交</button>
   </div>
</div>

三、拓展功能

1. 点击屏幕的时候不关掉引导弹窗

useEffect(() => {
    // 找到 modal 元素重置他的点击事件
    document.querySelector('.introjs-overlay').onclick = () => {}
}, []);

2. 点击每一步的时候额外做一些操作

比如点击到最后一步的时候去跳转页面。

// 首先在设置步骤的时候多设置一步，这样在你点击到最后一个步骤的时候它才能出 next 按钮
<Steps
    enabled={stepsEnabled}
    steps={steps}
    initialStep={0}
    onChange={(nextStepIndex, nextElement) => {
        // 这里可以根据下一个元素，或者下一步的index做一些自定义操作
        if (nextStepIndex === 1) {
            // window.location.href = 'https://mybj123.com';
        }
    }}
    onExit={() => onExit()}
/>

原文：点击链接

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！