Vue3中使用用户引导插件driver.js

对比了用户引导插件intro.js和driver.js

intro.js:https://introjs.com/

Intro.js 是 AGPL 许可和开源的。但是，如果您想在您的商业应用程序、网站或插件中使用 Intro.js，则需要获得商业许可证。

driver.js:Driver

MIT 许可– 免费供个人和商业使用

本文介绍在vue3 setup语法糖中如何使用dirvre.js来实现用户引导

1、安装

npm install driver.js

2、引入插件和样式

import Driver from "driver.js";
import "driver.js/dist/driver.min.css";

3、定义数据及创建driver

element：对应的是元素id或class名称，若是给元素设置了class就用.，设置id就用#

description：为展示的内容，可以是html元素

position：引导卡片所在的位置，若不设置会自动计算放在合适的位置

  <div id="intro-box">
    <h2 class="intro-name">driver.js</h2>
    <el-button id="intro-button">展示图片</el-button>
    <div id="intro-bottom">测试非可视区域</div>
  </div>

const driver = ref();
const steps = [
  {
    element: ".intro-name",
    popover: {
      title: "插件名称",
      description: "插件为driver.js",
      // position: "top",
    },
  },
  {
    element: "#intro-button",
    popover: {
      title: "展示图片",
      description: `测试能否展示html片段：<img
      src="https://img0.baidu.com/it/u=962361882,2281204904&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
      alt=""
      style="width: 200px; height: 200px"
    />`,
      position: "bottom",
    },
  },
  {
    element: "#intro-bottom",
    popover: {
      title: "给非可视区域设置引导",
      description: "给非可视区域设置引导,测试是否会自动滚动",
      // position: 'bottom'
    },
  },
];
const handleShowGuide = () => {
  driver.value.defineSteps(steps);
  driver.value.start();
};
onMounted(() => {
  driver.value = new Driver({
    animate: true,
    doneBtnText: "完成",
    closeBtnText: "关闭",
    nextBtnText: "下一步",
    prevBtnText: "上一步",
    keyboardControl: true,
  });
  handleShowGuide();
});

使用过程中发现一个问题：给非可视区域设置引导时会自动滚动到非可视区域，点击上一步回到最开始的可视区域时不会自动滚动了。还未找到解决办法😂