VUE中使用driver.js实现先手引导

npm install driver.js
yarn add driver.js

import Driver from ‘driver.js‘
import ‘driver.js/dist/driver.min.css‘

Vue.prototype.$driver = new Driver({
  doneBtnText: ‘完成‘, // Text on the final button
  closeBtnText: ‘关闭‘, // Text on the close button for this step
  stageBackground: ‘#fff‘, // Background color for the staged behind highlighted element
  nextBtnText: ‘下一步‘, // Next button text for this step
  prevBtnText: ‘上一步‘, // Previous button text for this step
})

export default [
    {
        element: ‘#userInfo‘,
        popover: {
            title: ‘用户信息‘,
            description: ‘显示用户名,退出,全屏操作,换肤操作‘,
            position: ‘left‘,
        }
    },
    {
        element: ‘#grid‘,
        popover: {
            title: ‘收缩，面包屑‘,
            description: ‘点击开关导航栏，面包屑展示‘,
            position: ‘right‘,
        }
    },
    {
        element: ‘#tagGroup‘,
        popover: {
            title: ‘tag标签‘,
            description: ‘记录打开页面‘,
            position: ‘bottom‘,
        }
    },
    {
         element: ‘#mainInfo‘,
        popover: {
            title: ‘内容区‘,
            description: ‘显示页面内容‘,
            position: ‘left‘,
        }
    },
    {
        element: ‘#nav‘,
        popover: {
            title: ‘导航区‘,
            description: ‘导航功能展示‘,
            position: ‘right‘,
        }
    },
]

import driverStep from "@/utils/driver";

    start() {
      this.$nextTick(() => {
        this.$driver.defineSteps(driverStep);
        this.$driver.start();
      });
    }