Driver.js使用安装引入 npm CDN 通过命名方式引入driver 通过CDN引入并使用示例代码 drive

安装引入

npm

pnpm install driver.js

CDN

<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />

通过命名方式引入driver

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description"
  }
});

通过CDN引入并使用

  const driver = window.driver.js.driver;

    const driverObj = driver({
        nextBtnText: '下一页',
        prevBtnText: '上一页',
        doneBtnText: '结束',
        steps: [
            { element: '.box', popover: { title: '快速上手', description: '欢迎使用物联网平台，您可以通过以下指引快速上手：', side: "left", align: 'start' } },
            { element: '.box1', popover: { title: '新建模板', description: '1、上传数据点表', side: "bottom", align: 'start' } },
            { element: '.box', popover: { title: '注册网关', description: '1、自动注册或者手动注册', side: "bottom", align: 'start' } },
            { element: '.box1', popover: { title: '新建资源', description: '1、依次新建客户、工程、现场、设备', side: "bottom", align: 'start' } },
            { element: '.box', popover: { title: '绑定网关', description: '1、接入设备并绑定网归', side: "bottom", align: 'start' } },
        ]
    });
    driverObj.drive();

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        这是一个盒子
    </div>
    <div class="box1">
        只是一个盒子555
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />
<script>
    const driver = window.driver.js.driver;

    const driverObj = driver({
        nextBtnText: '下一页',
        prevBtnText: '上一页',
        doneBtnText: '结束',
        steps: [
            { element: '.box', popover: { title: '快速上手', description: '欢迎使用物联网平台，您可以通过以下指引快速上手：', side: "left", align: 'start' } },
            { element: '.box1', popover: { title: '新建模板', description: '1、上传数据点表', side: "bottom", align: 'start' } },
            { element: '.box', popover: { title: '注册网关', description: '1、自动注册或者手动注册', side: "bottom", align: 'start' } },
            { element: '.box1', popover: { title: '新建资源', description: '1、依次新建客户、工程、现场、设备', side: "bottom", align: 'start' } },
            { element: '.box', popover: { title: '绑定网关', description: '1、接入设备并绑定网归', side: "bottom", align: 'start' } },
        ]
    });
    driverObj.drive();


</script>

参考链接

driver.js官网