用Driver.js实现用户引导

• 前言

  最近写到一个用户新手引导的功能，类似于阿里云，华为云等控制台第一次进入时候的用户引导模式。使用Driver.js，提供了Vue的api，直接调用即可。

使用方法

1.引入

yarn add driver.js

2. 在项目中使用

• 在需要组件中引入

<script>
import Driver from "driver.js" // import driver.js
import "driver.js/dist/driver.min.css" // import driver.js css
import steps from "../plugins/guide"
 
export default {
  data () {
    return {
      driver: null
    }
  },
  mounted () {
    this.driver = new Driver({
      className: "scoped-class", // className to wrap driver.js popover
      animate: true, // Animate while changing highlighted element
      opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
      padding: 10, // Distance of element from around the edges
      allowClose: true, // Whether clicking on overlay should close or not
      overlayClickNext: false, // Should it move to next step on overlay click
      doneBtnText: "完成", // Text on the final button
      closeBtnText: "关闭", // Text on the close button for this step
      nextBtnText: "下一步", // Next button text for this step
      prevBtnText: "上一步" // Previous button text for this step
      // Called when moving to next step on any step
    })
    // this.driver = new Driver()
  },
  methods: {
    guide () {
      this.driver.defineSteps(steps)
      this.driver.start()
    }
  }
}
</script>

• 编写引导流程

//guide.js
export const steps = [ //可以导出多个引导步骤，在不同组件中使用
  {
    element: "xxx", //通过id获取元素
    popover: {
      title: "",
      description: "",
      position: "right"
    }
  },
  {
    element: "xxx", //通过id获取元素
    popover: {
      title: "",
      description: "",
      position: "right"
    }
  }
]

• 调整细节
  如果项目中使用了

position: fixed

那么需要修改全局中，由driver.js添加的css：

.dirver-fix-stacking .header {
position: relative
}

防止出现引导的白底覆盖掉原先内容的问题。当然，也可以通过调整element的z-index来实现。