Driver.js

是一個輕量級的Javascript類庫，可用于產(chǎn)品導(dǎo)覽、亮點、上下文幫助等，從而一步一步地導(dǎo)覽用戶快速熟悉產(chǎn)品功能。
官網(wǎng)：https://driverjs.cn/

• 實例：

  
  
  image.png

1.安裝

npm install driver.js

2.使用

GuideDriver/index.ts

import { driver } from 'driver.js';

import 'driver.js/dist/driver.css';

const driverStart = () => {
  const driverObj = driver({
    animate: true,
    showProgress: true,
    allowClose: false,
    showButtons: ['next', 'previous'],
    prevBtnText: '上一步',
    nextBtnText: '下一步',
    doneBtnText: '完成',
    steps: [
      {
        element: '#header',
        popover: {
          title: '標(biāo)題',
          description: 'Description',
          align: 'start',
          side: 'top',
        },
      },
      {
        element: '#content',
        popover: {
          title: '內(nèi)容',
          description: 'Description',
          align: 'start',
          side: 'top',
        },
      },
      {
        element: '#article',
        popover: {
          title: '文章',
          description: 'Description',
          align: 'start',
          side: 'top',
        },
      },
      {
        element: '#footer',
        popover: {
          title: '底部',
          description: 'Description',
          align: 'start',
          side: 'top',
        },
      },
    ],
  });

  driverObj.drive();
};

export { driverStart };

app.tsx

import { useEffect } from 'react';

import { driverStart } from './GuideDriver';

import './App.css';

function App() {
  useEffect(() => {
    driverStart();
  }, []);
  return (
    <div className="app">
      <div id="header" className="header">
        頭部
      </div>
      <div id="content" className="content">
        內(nèi)容
      </div>
      <div id="article" className="article">
        文章
      </div>
      <div id="footer" className="footer">
        底部
      </div>
    </div>
  );
}

export default App;