nodejs 037: 前端新手教程使用引导库 Intro.js

news2025/10/31 21:18:42

Intro.js简介

Intro.js 是一个流行的引导库，用于提供步进式的新手教程。它可以帮助你创建用户引导，展示一些步骤和提示，逐步引导用户了解应用程序的功能。

安装方法：

npm install intro.js

使用方法：

import introJs from 'intro.js';
import 'intro.js/introjs.css';

const startTutorial = () => {
  const intro = introJs();
  intro.setOptions({
    steps: [
      {
        element: '#step1',
        intro: '这是步骤1的提示信息。',
      },
      {
        element: '#step2',
        intro: '这是步骤2的提示信息。',
      },
    ],
  });

  intro.start();
};

startTutorial();

你可以通过 #step1 和 #step2 等 ID 选择页面上的元素，设置每个步骤的提示信息。

使用示例：

以下为一个在初始化的 React 中使用 intro.js 的示例：
- 初始化的 React 项目：
- 使用效果：

代码实现：

Intro.js

import React, { useEffect } from 'react';
import introJs from 'intro.js'; // 引入 intro.js
import 'intro.js/introjs.css'; // 引入 intro.js 样式

const Intro = () => {
  useEffect(() => {
    // 初始化并配置 Intro.js
    const intro = introJs();
    intro.setOptions({
      steps: [
        {
            element: '.App-header',
            intro: '欢迎使用本APP,这是新手引导.',
        },
        {
          element: '.App-logo',
          intro: 'App-logo ！！!',
        },
        {
          element: '.App-link',
          intro: 'Click & Learn more ！！!',
        }
      ],
      showStepNumbers: true,
      showBullets: true,
      exitOnOverlayClick: true,
    });

    // 启动 Intro.js
    intro.start();
  }, []);

  return null; // Intro 组件不渲染任何东西
};

export default Intro;

. 修改 App.js 使用 Intro 组件

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Intro from './Intro'; // 引入 Intro 组件

function App() {
  return (
    <div className="App">
      <Intro /> {/* 渲染 Intro 组件 */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;