vue实现新手引导-------driver.js 插件的简单应用

本文链接：https://blog.csdn.net/jqyy1996/article/details/116130372

首先下载安装

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: '上一步', // 上一步按钮标题
})

再创建一个给要引导的页面创建相应的数组对象导出使用的js文件，例如创建一个defineSteps.js
留意一下下面代码中的 element: "#demo1"

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

一个对象就是一个引导框，需要几个就配置几个
再然后就是在要使用的文件中创建几个跟上面对象相对应的元素注意需要使用唯一的 id=“demo1” 对应对象中 element: "#demo1

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

再引入defineSteps.js 文件

<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>