driver.js 轻量级前端引导库

前言

我们会在部分网页中看到类似引导的功能，把用户引导到网页的某个位置，其他区域被黑色遮罩覆盖，同时用气泡弹窗说明这块区域的功能，点击下一步，另一个区域被引导，如此循环，直到引导结束。

这种引导用户在一些前端组件库里也有，比如 ANTD 的 Tour , 今天介绍一个我觉得简单强大的库，driver.js 也一样能实现漫游式引导的功能。

使用方式

安装

npm

npm install driver.js 

yarn

yarn add driver.js 

pnpm

 pnpm install driver.js

基本使用

引入模塊

import { driver, Driver, Side, AllowedButtons } from "driver.js";
import "driver.js/dist/driver.css";

传入配置实例化 driver 对象 ，steps 中的element 可以是dom 元素，也可以是css 选择器

const driverObj = driver({
    steps: [
        { element: '.page-header', popover: { title: 'Title', description: 'Description' } },
        { element: '.top-nav', popover: { title: 'Title', description: 'Description' } },
        { element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
        { element: '.footer', popover: { title: 'Title', description: 'Description' } },
    ],
})

调用 drive 方法开始引导

driverObj.drive()

试一试

显示引导

Demo源码

import React, { useRef, useEffect } from 'react';
import Headroom from 'headroom.js';
import TryArea from '../../../src/components/TryArea';
import './headroomjs.css';

const HeadroomjsDemo = () => {
const headerRef = useRef(null);

useEffect(() => {
    setTimeout(() => {
        console.log("🚀 ~ useEffect ~ headerRef.current:", headerRef.current);
        if (headerRef.current) {
            const headroom = new Headroom(headerRef.current);
            headroom.init();
        }
    }, 3000);
}, []);

const boxStyle = {
    height: '10vh',
    marginBottom: '1vw',
    boxShadow: '0 0 10px #00000010',
    borderRadius: '1rem',
    backgroundColor: '#ddd'
}

const headerStyle = { background: '#37bcffde', padding: '10px', position: 'absolute', width: '100%', top: 0 } as React.CSSProperties

return (
    <TryArea style={{ position: 'relative', padding: '0', height: '30vh', overflow: 'scroll' }}>
        <header ref={headerRef} style={headerStyle}>
            <p>一个会隐藏的顶部导航栏</p>
        </header>
        <div style={{ padding: '20px' }}>
            <div style={boxStyle} />
            <div style={boxStyle} />
            <div style={boxStyle} />
        </div>
    </TryArea>
);
};

export default HeadroomjsDemo;