vue driver.js引导页面效果

首先，先安装 npm install driver.js

npm install driver.js

页面再引用

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
import steps from "./guide"; // 配置项 

对应的HTML 上加上最好是id 可以是.class

<div id="guide-menu">
    <div></div>
    <p>快捷下单</p>
    <span>快捷自主下单</span>
</div>

配置项 guide.js
//guide.js

const steps = [
   {
      element: "#template2_logout",
      popover: {
        title: "退出",
        description: "退出",
        position: "left"
      }
    },
    {
      element: "#guide_title",
      popover: {
        title: "首页",
        description: "首页",
        position: "right"
      }
    },
    {
      element: "#guide-menu",
      popover: {
        title: "快捷下单",
        description: "快捷自主下单",
        position: "right"
      }
    }
  ]
  export default steps

使用

data() {
    return {
        driver: null
    }
},
mounted () {
    // if(sessionStorage.getItem("guidePage")){ // 第一次进来 走引导
        this.guide();
    // }
  },
methods: {
    guide() {
        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: false, // 是否点击遮罩关闭
            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.defineSteps(steps);
        this.driver.start();
        sessionStorage.removeItem("guidePage");// 清除引导标识
      }, 
      }