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