页面新手引导插件 driver.js

笔者较为熟悉 vue 框架，就在这个里面为大家演示吧。（主要是我也没试过 react 行不行）

先上效果图（pc端和移动端均可使用，笔者这里是为了录制 gif 图，才把页面缩小）

1.安装

npm install driver.js

虽然插件提供链接方式引入，但一般的开发中很少使用

main.js

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

Vue.prototype.$driver = new Driver({
  allowClose: false, //禁止点击外部关闭
  doneBtnText: '完成', // 完成按钮标题
  closeBtnText: '关闭', // 关闭按钮标题
  stageBackground: '#fff', // 引导对话的背景色
  nextBtnText: '下一步', // 下一步按钮标题
  prevBtnText: '上一步', // 上一步按钮标题
})

一般使用都是给要引导的页面创建相应的数组对象导出使用，例如创建一个defineSteps.js

export const defineSteps = [
  {
    element: "#demo1",
    popover: {
      title: "演示标题1",
      description: "这是详细描述\n",
      position: "bottom-center",
    },
  },
  {
    element: "#demo2",
    popover: {
      title: "演示标题2",
      description: "这是详细描述\n",
      position: "bottom-center",
    },
  },
  {
    element: "#demo3",
    popover: {
      title: "演示标题3",
      description: "这是详细描述\n",
      position: "top-center",
    },
  },
]

export default defineSteps

一个对象就是一个引导框，看你需要几个就配置几个

想要使用的页面中

<template>
  <div>
    <h1 id="demo1">dfdsfsdf</h1>
    <h2 id="demo2">dfdsfsdf</h2>
    <h3 id="demo3">dfdsfsdf</h3>
  </div>
</template>

<script>
import defineSteps from './defineSteps'

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      driver: null,
    };
  },
  mounted() {
    this.$driver.defineSteps(defineSteps);
    this.$driver.start();
  },
};
</script>

完美撒花