1. 安裝intro.js插件
npm安裝：$ npm i introjs vue-introjs (若較慢或安裝失敗請使用cnpm或yarn安裝)
yarn安裝：$ yarn add introjs vue-introjs
2. main.js引入intro.js
1 import VueIntro from 'vue-introjs' 2 Vue.use(VueIntro); 3 import 'intro.js/introjs.css';
3. 使用intro.js
基本用法如下↓
var introJS=require("intro.js");
introJS().setOptions({
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳過",
doneLabel: "結束引導",
overlayOpacity: .7,
hidePrev: true,
hideNext: true,
showStepNumbers: true,
showProgress: true,
highlightClass: "highlight",
exitOnOverlayClick: false,
tooltipClass: "tool-tip",
steps: [
{
element: "#step1",
intro:
"歡迎使用intro.js",
position: "right",
},
{
element: "#step2",
intro:
"他是一款網頁引導插件",
position: "left"
},
{
element: "#step3",
intro:
"靈活運用它能為你的頁面帶來不錯的效果",
position: "top"
}
]
}).onbeforechange ((e) => {
}).onexit(() =>{
}).start();
上面是沒有用到vue-intro.js的寫法，也可以在template中的元素添加v-intro、v-intro-step、v-intro-position等屬性實現對應效果，具體請參考https://www.npmjs.com/package/vue-introjs
4.intro.js參數及方法詳解
| 參數名 | 默認值 | 說明 |
| nextLabel | Next | 下一步按鈕的顯示名稱 |
| prevLabel | Back | 上一步按鈕的顯示名稱 |
| skipLabel | Skip | 跳過按鈕的顯示名稱 |
| doneLabel | Done | 結束按鈕的顯示名稱 |
| tooltipPosition | bottom | 說明框相對於高亮說明區域的位置 |
| tooltipClass | / | 填寫類名，說明框的樣式 |
| highlightClass | / | 填寫類名，高亮區域的樣式 |
| exitOnEsc | true | 是否允許使用ESC退出引導 |
| exitOnOverlayClick | true | 是否允許點擊遮罩層退出引導 |
| showStepNumbers | true | 是否顯示當前步驟 |
| keyboardNavigation | true | 是否允許鍵盤控制 |
| showBullets | true | 是否使用點點點來顯示進度 |
| showProgress | false | 是否顯示進度條 |
| scrollToElement | true | 是否滑動到高亮區域 |
| overlayOpacity | / | 遮罩層的透明度 |
| positionPrecedence | ["bottom", "top", "right", "left"] | 當位置選擇自動的時候位置排列的優先級 |
| disableInteraction | false | 是否禁止與元素的相互關聯 |
| hintPosition | top-middle | 默認提示位置 |
| hintButtonLabel | / | 默認提示內容 |
setOptions()：參數配置、步驟配置。
onbeforechange((e) => {})：每一步跳轉前的回調，接受一個參數e（當前高亮的元素），在這里你可以通過id或class來判斷現在是哪一步，用於完成不同步驟下的顯示內容，如最后一步加入不再提示選擇框，該回調需要返回值，return true允許進入下一步，反之不允許。
onexit(() => {})：跳過或結束引導時執行的回調函數，你可以在這里完成一些結束引導后你想做的事。
start()：引導開始函數，直接調用即可開始引導。
效果圖↓
tips：該插件可以跨越vue組件，但不可以跨越tab頁面
女神鎮樓
注：小白第一篇文章，寫的不好請見諒。