Driver.js的使用

国际惯例 先上此贴实现功能预览图

Driver.js是一个用于凸显页面的某一部分的插件

安装Driver.js

yarn add driver.js
npm install driver.js

在页面中导入driver.js

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

 

定义导航的数据

 data() {
       return {
         driver: null
      }
    }

 

实例化Driver

 mounted() {
       this.driver = new Driver({
         opacity: 0.1,
         animate: true,
         doneBtnText: '我知道了',
         closeBtnText: '跳过', //  关闭按钮文案
         nextBtnText: '下一步', // 下一步的按钮文案
         prevBtnText: '上一步', // 上一步的按钮文案
      })
    },

 

定义一个方法触发引导

 guide() {
         this.driver.defineSteps(steps)
         this.driver.start()
      }

 

其中的steps资源文件

 const steps = [
  {
     element: '#hamburger-container',
     popover: {
       title: '侧边栏按钮',
       description: '打开或者关闭侧边栏',
       position: 'bottom'
    }
  },
  {
     element: '#breadcrumb-container',
     popover: {
       title: 'Breadcrumb',
       description: 'Indicate the current page location',
       position: 'bottom'
    }
  }
 ]
 export default steps