VUE中使用driver.js實現先手引導

簡介

特色功能：

• 突出顯示頁面上的任何任何項目
• 鎖定用戶交互
• 創建功能介紹
• 為用戶添加聚焦器
• 高度可定制 – 可在任何地方使用，可覆蓋
• 界面友好 – 可通過按鍵控制
• 輕量級 – gzip 壓縮后只有約4kb
• 在所有主流瀏覽器中保持一致的行為
• 免費用於個人和商業用途

 

安裝

### 使用 npm 或 yarn 安裝

npm install driver.js
yarn add driver.js

 

使用

### 1.導入

main.js 中導入文件

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

### 2.將方法寫入原型

main.js 中

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
})

### 3.配置引導節點（新建文件driver.js）

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',
        }
    },
]

### 4.需要引導的頁面中導入節點配置文件

import driverStep from "@/utils/driver";

### 5.需要引導的頁面中定義引導函數

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

### 6.調用函數

 

效果

 

 

 

 

 

特此聲明：如需轉載請注明出處，如有疑問請及時提出以便於改正，如有侵權，聯系刪除，謝謝