Driver.js，前端产品步骤引导库，在vue项目中安装和使用

一、安装

yarn add driver.js

二、在需要的页面引入并使用

一）基本使用

<template>
  <div class="test-guide">
    <h1>测试driver.js</h1>
    <el-button id="guide-ele" type="primary">我是第一步</el-button>
  </div>
</template>
<script>
import "driver.js/dist/driver.min.css";// 引入css
import Driver from "driver.js"; // 引入库
export default {
  mounted() {
    this.showTips();
  },
  methods: {
    showTips() {
      const driver = new Driver();
      driver.highlight({
        element: "#guide-ele",
        stageBackground: "#ffa0a0",
        popover: {
          title: "温馨提示",
          description: "这是本站的首页",
          position: "bottom",
          className: "first-step"
        }
      });
    }
  }
};
</script>
<style lang="scss">
.test-guide {
  color: #ffa0a0;
}
.first-step {
  // 必须放在最外层，因为它是body标签的直属下级
  .driver-popover-title {
    // 重写title样式
    color: red;
  }
}
</style>

二）提供步骤，以指导用户有关功能的信息 （刷新或者再次打开该网页仍有引导）

<template>
  <div class="test-guide">
    <h1>测试driver.js</h1>
    <el-button id="first-ele" type="primary">首页</el-button>
    <el-button id="second-intro" type="warning">帮助</el-button>
    <el-button id="third-des" type="primary">联系我们</el-button>
  </div>
</template>
<script>
import "driver.js/dist/driver.min.css";
import Driver from "driver.js";
export default {
  mounted() {
    this.showTips();
  },
  methods: {
    showTips() {
      const driver = new Driver({
        prevBtnText: "上一步",
        nextBtnText: "下一步",
        doneBtnText: "我知道了",
        closeBtnText: "关闭"
      });
      const steps = [
        {
          element: "#first-ele",
          popover: {
            title: "这是本站首页",
            description: "本站首页是一些展示性的信息",
            position: "bottom"
          }
        },
        {
          element: "#second-intro",
          popover: {
            title: "这是帮助",
            description: "点此处可获取一些本站的相关说明",
            position: "top"
          }
        },
        {
          element: "#third-des",
          popover: {
            title: "联系我们",
            description: "点击这里可获取我们的相关信息",
            position: "right"
          }
        }
      ];
      driver.defineSteps(steps);
      driver.start();
    }
  }
};
</script>
<style lang="scss">
.test-guide {
  color: #ffa0a0;
}
</style>

三）新手引导，当用户第一次访问该网站的时候，才有新手引导，刷新或者再次打开该网页 ，无引导

<template>
  <div class="test-guide">
    <h1>测试driver.js</h1>
    <el-button id="first-ele" type="primary">首页</el-button>
    <el-button id="second-intro" type="warning">帮助</el-button>
    <el-button id="third-des" type="primary">联系我们</el-button>
  </div>
</template>
<script>
import "driver.js/dist/driver.min.css";
import Driver from "driver.js";
export default {
  mounted() {
    let flag = localStorage.getItem("firstVisit");
    if (!flag) {
      // flag不存在，即当用户第一次访问该网页的时候，调用showTips，显示新手引导
      this.showTips();
    }
  },
  methods: {
    showTips() {
      const driver = new Driver({
        prevBtnText: "上一步",
        nextBtnText: "下一步",
        doneBtnText: "我知道了",
        closeBtnText: "关闭",
        onReset: ele => {
          //Called when overlay is about to be cleared； 用户关闭了新手引导，此时需设置firstVisit，表明该用户已经访问过该网页(不是第一次访问），下次在同一台电脑上再打开该网页的时候，将不再显示新手引导（用户手动清除缓存的情况除外)
          localStorage.setItem(
            "firstVisit",
            JSON.stringify({ firstVisit: false })
          );
        }
      });
      const steps = [
        {
          element: "#first-ele",
          popover: {
            title: "这是本站首页",
            description: "本站首页是一些展示性的信息",
            position: "bottom"
          }
        },
        {
          element: "#second-intro",
          popover: {
            title: "这是帮助",
            description: "点此处可获取一些本站的相关说明",
            position: "top"
          }
        },
        {
          element: "#third-des",
          popover: {
            title: "联系我们",
            description: "点击这里可获取我们的相关信息",
            position: "right"
          }
        }
      ];
      driver.defineSteps(steps);
      driver.start();
    }
  }
};
</script>
<style lang="scss">
.test-guide {
  color: #ffa0a0;
}
</style>

它还提供了一些方法，更多相关信息，请移步：driverjs