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抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » React实战项目做类似王者荣耀的新手引导功能

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们