目录文章目录前言一、完整的代码react 代码：css 代码：二、代码解析1. 首先我们是需要先安包的：2. 安包之后需要进行一个引入：3. 然后我们初始化四个状态4. 新手指导弹窗的效果：5. 控制状态6. return 一个组件三、拓展功能1. 点击屏幕的时候不关掉引导弹窗2. 点击每一步的时候额外做一些操作 前言 笔者做这个新手指导调研了三个库，最终的效果的话感觉只有 intro.js 的效果最好，效果如下展示： 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 = ''; } }} onExit={() => onExit()} />
