通常進入一個專案會有一個使用者引導,我們今天來說一下

1.intro.js官網

intro.js官網

2.下載intro.js

通常有兩種方式
第一種:使用 npm 安裝 npm install intro.js --save
第二種:在package.json內寫入想要安裝的版本,在npm i;我使用的是"intro.js": "^5.0.0",版本

3.在main.js檔案中引入元件並掛載到例項上

import intro from 'intro.js' // introjs庫
import 'intro.js/introjs.css' // introjs預設css樣式
import 'intro.js/themes/introjs-modern.css' // introjs主題

// 加到prototype中，直接通過vue例項就能呼叫intro了
Vue.prototype.$intro = intro

// 封裝一個v-intro-if指令，這樣就可以在迴圈中展示符合特定條件的引導了
Vue.directive('intro-if', {
  bind: function (el, binding) {
    if (binding.value === false) {
      delete el.dataset.intro
      delete el.dataset.hint
    }
  }
})
 

4.在頁面中使用

 <div id="app">
    <img data-intro="這是一張普通的圖片" data-step="1" src="./assets/logo.png" />
    <HelloWorld />
    <h2>v-intro-if測試</h2>
    <ol>
      <li v-for="item in fruits" :key="item">
        <span v-intro-if="item === 'banana'" data-intro="這是香蕉">{{ item }}</span>
      </li>
    </ol>
    <button @click="viewIntro()" data-intro="點選這裡可以重新查看向導內容">查看向導</button>
  </div>

 

data-step="1" 代表顯示的步驟順序
data-intro="這是一張普通的圖片" 引號內代表顯示的資訊文字

js邏輯

  mounted() {
    this.$nextTick(() => {
      if (
        localStorage.getItem("isFirst") === null ||
        localStorage.getItem("isFirst") !== "1"
      ) {
        this.$intro().start();
        localStorage.setItem("isFirst", 1);
      }
    });
  },
 

 methods: {
    viewIntro() {
      // this.$intro().start();
      this.$intro()
        .setOptions({
          nextLabel: "下一個", // 下一個按鈕文字
          prevLabel: "上一個", // 上一個按鈕文字
          skipLabel: "跳過", // 跳過按鈕文字
          doneLabel: "立即體驗", // 完成按鈕文字
          hidePrev: true, // 在第一步中是否隱藏上一個按鈕
          hideNext: true, // 在最後一步中是否隱藏下一個按鈕
          exitOnOverlayClick: false, // 點選疊加層時是否退出介紹
          showStepNumbers: false, // 是否顯示紅色圓圈的步驟編號
          disableInteraction: true, // 是否禁用與突出顯示的框內的元素的互動，就是禁止點選
          showBullets: true, // 是否顯示面板指示點
          tooltipPosition: "bottom" /* 引導說明框相對高亮說明區域的位置 */,
          tooltipClass: "intro-tooltip" /* 引導說明文字框的樣式 */,
          highlightClass: "intro-highlight" /* 說明高亮區域的樣式 */,
          exitOnEsc: true /* 是否使用鍵盤Esc退出 */,
          helperElementPadding: 2 /* 提示邊框的padding */,
          keyboardNavigation: true /* 是否允許鍵盤來操作 */,
          showButtons: true /* 是否按鍵來操作 */,
          showProgress: false /* 是否顯示進度條 */,
          scrollToElement: true /* 是否滑動到高亮的區域 */,
          overlayOpacity: 0.7 /* 遮罩層的透明度 */,
          /* 當位置選擇自動的時候，位置排列的優先順序 */
          positionPrecedence: ["bottom", "top", "right", "left"]
          /* 是否在第一步隱藏上一步 */
          // hidePrev: true,
          /* 是否在最後一步隱藏下一步 */
          // hideNext: true,
          /* steps步驟，可以寫個工具類儲存起來 */
          // steps: []
        })
        .start();
    }
  }