在vue專案中 使用driver.js來進行頁面分步引導

driver.js

特色功能：

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

安裝

無論你喜歡哪種方式，你都可以使用 yarn 或 npm 進行安裝。

yarn add driver.js

npm install driver.js

或者直接在檔案中引入它。

<link rel="stylesheet" href="/dist/driver.min.css">
<script src="/dist/driver.min.js"></script>

在vue專案中安裝 driver.js

npm install driver.js

在需要用到的頁面引入，例如：help.vue

<script>
import Driver from "driver.js" // import driver.js
import "driver.js/dist/driver.min.css" // import driver.js css
import steps from "../vendor/guide"

export default {
  name: "Guide",
  data () {
    return {
      driver: null
    }
  },
  mounted () {
    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: true, // Whether clicking on overlay should close or not
      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 = new Driver()
  },
  methods: {
    guide () {
      this.driver.defineSteps(steps)
      this.driver.start()
    }
  }
}
</script>

配置步驟引導的節點，guide.js

//guide.js
const steps = [
  {
    element: "#guide-menu",
    popover: {
      title: "選單導航",
      description: "點選選單可切換右側選單內容",
      position: "right"
    }
  },
  {
    element: ".collapse-box",
    popover: {
      title: "漢堡包",
      description: "點選收縮和展開選單導航",
      position: "bottom"
    },
    padding: 5
  },
  {
    element: "#guide-breadcrumb",
    popover: {
      title: "麵包屑導航",
      description: "用於顯示 當前導航選單的位置",
      position: "bottom"
    }
  },
  {
    element: ".user-content",
    popover: {
      title: "個人中心",
      description: "點選可操作",
      position: "left"
    }
  },
  {
    element: "#tagsView",
    popover: {
      title: "最近開啟任務",
      description: "最近開啟任務選單，點選可快速切換",
      position: "bottom"
    }
  }
]

export default steps