vue项目引入并使用新手指引功能

今天介绍一个新手指引功能的插件，driver.js.为了保证我们安装的包都一样，可以选择安装同一个版本的，我安装的是0.9.5版本的。直接输入命令

npm install driver.js@0.9.5 -S

 经过两秒半之后，我们就安装成功了。现在在需要做新手指引的页面直接使用（可以不在main.js全局引用）

写了一个测试文件，二话不说，直接上代码吧

<template>
  <div class="app-container">
    <aside id="aside">
      指南页面对首次参与该项目的人来说非常有用。您可以简要介绍该项目的功能。演示基于
      <a href="https://github.com/kamranahmedse/driver.js" target="_blank"
        >driver.js</a
      >。
    </aside>
    <span class="tips1">这是第一个要提示的内容</span><br />
    <span class="tips2">这是第二个要提示的内容</span><br />
    <span class="tips3">这是第三个要提示的内容</span><br />
    <span class="tips4">这是第四个要提示的内容</span><br />
    <span class="tips5">这是第五个要提示的内容</span><br />
    <span class="tips6">这是第六个要提示的内容</span><br />
    <span class="tips7">这是第七个要提示的内容</span><br />
    <span class="tips8">这是第八个要提示的内容</span>
  </div>
</template>

这是页面中的html代码，下面是css代码，只设置了span的样式，做了个换行和间距

 

<style lang="scss" scoped>
span {
  display: inline-block;
  margin-bottom: 1rem;
}
</style>

先看一下页面的布局，如下图

现在是最重要的js代码了

<script>
import Driver from "driver.js"; // 引入脚本文件
import "driver.js/dist/driver.min.css"; // 引入css文件

export default {
  name: "drivertest",
  data() {
    return {
      driver: null,
      steps: [
        {
          element: "#aside",
          popover: {
            title: "哈哈",
            description: "来了啊",
            position: "bottom",
          },
        },
        {
          element: ".tips1",
          popover: {
            title: "tips1",
            description: "来了啊",
            position: "bottom",
          },
        },
        {
          element: ".tips2",
          popover: {
            title: "tips2",
            description: "来了啊",
            position: "bottom",
          },
        },
        {
          element: ".tips3",
          popover: {
            title: "tips3",
            description: "来了啊",
            position: "bottom",
          },
        },
        {
          element: ".tips4",
          popover: {
            title: "tips4",
            description: "来了啊",
            position: "bottom",
          },
        },
        {
          element: ".tips5",
          popover: {
            title: "tips5",
            description: "来了啊",
            position: "bottom",
          },
        },
        {
          element: ".tips6",
          popover: {
            title: "tips6",
            description: "来了啊",
            position: "bottom",
          },
        },
        {
          element: ".tips7",
          popover: {
            title: "tips7",
            description: "来了啊",
            position: "bottom",
          },
        },
        {
          element: ".tips8",
          popover: {
            title: "tips8",
            description: "来了啊",
            position: "bottom",
          },
        },
      ],
    };
  },
  mounted() {
    this.driver = new Driver({
      className: "scoped-class", // 包装类名
      animate: true, // 动画
      opacity: 0.75, // 遮罩层不透明度（0表示仅弹出且不覆盖）
      allowClose: false, // 点击遮罩层是否关闭
      overlayClickNext: false, // 点击遮罩层是否跳转到下一步
      doneBtnText: "完成", // 最后一个按钮上的文本
      closeBtnText: "关闭", // “关闭”按钮上的文本
      nextBtnText: "下一步", // “下一步”按钮上的文本
      prevBtnText: "上一步", // “上一步”按钮上的文本
      showButtons: true, // 不显示控制按钮（弹窗底部）
      keyboardControl: false, // 允许通过键盘进行控制（esc以关闭，箭头键移动）
    });
    this.guide();
  },
  methods: {
    guide() {
      // 设置步骤
      this.driver.defineSteps(this.steps);
      // 开始使用
      this.driver.start();
    },
  },
};
</script>

注意：如果你这报错了，很有可能是版本安装错了，我用的是0.9.5版本，其对应包的dist目录下是这样的，如果是其他版本，有可能会有不一样的现象，就会导致报错。

好的，万事俱备，把项目启动起来。两分半后，项目启动成功，进入刚写的页面组件中。直接就开始了新手指引了。

......

一直点击下一步，最后一步到了

OK，完成