使用intro.js實現分步驟幫助引導

intro.js無論是在pc端仍是手機端，均可以使用。代碼將結合vue來實現分步驟幫助引導。

安裝

npm install intro.js --save
複製代碼

新建一個intro.js文件配置intro

import introJs from 'intro.js'
import 'intro.js/introjs.css'

const intro = introJs()
// 更多配置參數請到官方文檔查看
intro.setOptions({
  nextLabel: '下一個',  // 下一個按鈕文字
  prevLabel: '上一個',  // 上一個按鈕文字
  skipLabel: '跳過',    // 跳過按鈕文字
  doneLabel: '當即體驗',// 完成按鈕文字
  hidePrev: true,       // 在第一步中是否隱藏上一個按鈕
  hideNext: true,       // 在最後一步中是否隱藏下一個按鈕
  exitOnOverlayClick: false,  // 點擊疊加層時是否退出介紹
  showStepNumbers: false,     // 是否顯示紅色圓圈的步驟編號
  disableInteraction: true,   // 是否禁用與突出顯示的框內的元素的交互，就是禁止點擊
  showBullets: false          // 是否顯示面板指示點
})

export default intro
複製代碼

有2種使用方式

方式一

使用HTML屬性

• data-intro：步驟的提示文本

• data-step：（可選）定義步驟的編號（優先級）

• data-tooltipClass：（可選）爲提示定義CSS類

• data-highlightClass：（可選）將CSS類附加到helperLayer

• data-position：定義提示的位置，top，left，right，bottom，bottom-left-aligned（同bottom）， bottom-middle-aligned，bottom-right-aligned或auto（檢測元件的位置，並自動分配正確的位置）。默認是bottom

• data-scrollTo：滾動到的元素，element或tooltip。默認值爲element。

• data-disable-interaction：是否禁用與突出顯示的框內的元素的交互，true或false（也可（1或0））。

html部分

<section class="nav-menu">
    <ul>
        <li :data-step="homeSteps.shifts.step" :data-intro="homeSteps.shifts.intro" :data-position="homeSteps.shifts.position" :data-disable-interaction="true">班次管理</li>
        <li :data-step="homeSteps.attendGroup.step" :data-intro="homeSteps.attendGroup.intro" :data-position="homeSteps.attendGroup.position" :data-disable-interaction="true">考勤組管理</li>
        <li :data-step="homeSteps.attendCount.step" :data-intro="homeSteps.attendCount.intro" :data-position="homeSteps.attendCount.position" :data-disable-interaction="true">考勤統計</li>
        <li :data-step="homeSteps.writeOff.step" :data-intro="homeSteps.writeOff.intro" :data-position="homeSteps.writeOff.position" :data-disable-interaction="true">覈銷統計</li>
    </ul>
</section>
複製代碼

js部分

import Intro from '@/utils/intro'  // 引入寫好的配置文件
export default {
    data () {
        homeSteps: {
          shifts: {
            step: '1',
            intro: '班次管理，配置上下班時間及各類人性化設置。',
            position: 'top'
          },
          attendGroup: {
            step: '2',
            intro: '考勤組管理，設置考勤方式、考勤時間等考勤規則。邀請人功能在這裏。',
            position: 'top'
          },
          attendCount: {
            step: '3',
            intro: '考勤統計，隨時可查看團隊每日/月出勤狀況。支持修改打卡結果。',
            position: 'top'
          },
          writeOff: {
            step: '4',
            intro: '覈銷統計，可查看修改打卡結果的歷史記錄。',
            position: 'top'
          }
        }
    },
    mounted () {
        if (!localStorage.getItem('isShowHelp')) {
          this.$nextTick(() => {
            // 開始
            Intro.start()
          })
          // 退出引導回調函數
          Intro.onexit(function () {
            localStorage.setItem('isShowHelp', 1)
          })
        }
    }
}
複製代碼

方式二

使用JSON配置

html部分

<section class="nav-menu">
    <ul>
        <li id="step1">班次管理</li>
        <li id="step2">考勤組管理</li>
        <li id="step3">考勤統計</li>
        <li id="step4">覈銷統計</li>
    </ul>
</section>
複製代碼

js部分

import Intro from '@/utils/intro'  // 引入寫好的配置文件
export default {
    mounted () {
        if (!localStorage.getItem('isShowHelp')) {
          // 配置
          Intro.setOptions({
            steps: [
              {
                element: '#step1',  // 目標元素
                intro: '班次管理，配置上下班時間及各類人性化設置。',   // 提示文本
                position: 'top'     // 提示位置
              },
              {
                element: '#step2',
                intro: '考勤組管理，設置考勤方式、考勤時間等考勤規則。邀請人功能在這裏。',
                position: 'top'
              },
              {
                element: '#step3',
                intro: '考勤統計，隨時可查看團隊每日/月出勤狀況。支持修改打卡結果。',
                position: 'top'
              },
              {
                element: '#step4',
                intro: '覈銷統計，可查看修改打卡結果的歷史記錄。',
                position: 'top'
              }
            ]
          })
          this.$nextTick(() => {
            // 開始
            Intro.start()
          })
          // 退出引導回調函數
          Intro.onexit(function () {
            localStorage.setItem('isShowHelp', 1)
          })
        }
    }
}
複製代碼