vue專案中怎麼實現使用者指引功能？以下這篇文章跟大家介紹一下在vue專案中使用Intro.js實作使用者指引功能的方法，希望對大家有幫助！
系統發布新版本或上線新功能後，為方便使用者快速了解新功能，通常需要新增一些使用者指引介面。
常見的實作使用者指引的外掛有：Intro.js、Shepherd、vue-tour、Driver. js等。這些外掛各有利弊，本文將基於vue專案介紹如何使用Intro.js實作使用者指引。 【學習影片分享：vue影片教學、web前端影片】
官方文檔中的demo 後可以輕鬆上手，便不在此贅述。
官方API文件。
introJs 的對象，可選參數targetElm 是一個字串類型，指開始指引的特定元素，例如：「#intro-farm」。
為已建立的 introJs 物件設定一組選項。參數 options 是一個物件類型，包括了指引中的所有信息，如：按鈕顯示文字、遮罩層透明度、提示文字等。
常用option如下：
上述部分欄位對應的內容如下圖所示，更多完整options可查看官方文件。
其中，doneLable 只會在最後一步指引中出現，會佔據nextLabel 的位置，因此，如果hideNext 置為true時，最後一步nextLabel 和doneLabel 都會被隱藏。
helperElementPadding 是圖中高亮區域中白色邊框部分（為區分該欄位對應區域，這裡刻意給所選元素一個粉紅色的背景色）。
Intro.js沒有任何依賴項，只需要安裝intro.js。
npm install intro.js --save
yarn add intro.js
git clone https://github.com/usablica/intro.js.git
如果使用者指引內容比較簡單且固定，可以直接將屬性寫在html標籤中，並呼叫introJs ().start()。主要屬性如下：
<template>
<div data-title="Welcome!" data-intro="Hello World!">
hello!
</div>
</template>
<script>
import introJs from "intro.js"; // 引入intro.js
import "intro.js/introjs.css"; // intro.js的基础样式文件
export default {
mounted () {
this.$nextTick(() => {
// Intro.js扫描页面并找到所有具有“data intro”属性的元素
introJs().start();
})
}
}
</script>當頁面需要配置較多步驟或有特殊化配置時，可以採用第二種種方式。需要在JSON中自訂配置，即透過使用API -- introJs.setOptions(options)。
1、封裝introConfig.js
實際使用過程中，可能會有多個場景需要做使用者指引。為避免重複多次配置一些基礎的選項內容，可以將基礎項目封裝到一個公共的文件introConfig.js中，文件內容如下：
// src/utils/introConfig.js
import introJs from "intro.js";
import "intro.js/introjs.css"; // intro.js的基础样式文件
import "intro.js/themes/introjs-modern.css"; // 主题样式文件
const intro = introJs();
intro.setOptions({
nextLabel: "下一步", // 下一个的按钮文字
prevLabel: "上一步", // 上一个按钮文字
skipLabel: "跳过", // 跳过指引的按钮文字
doneLabel: "完成", // 完成按钮的文字
hidePrev: false, // 是否在第一步中隐藏“上一步”按钮;不隐藏，将呈现为一个禁用的按钮
hideNext: false, // 是否在最后一步中隐藏“下一步”按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
exitOnEsc: false, // 点击键盘的ESC按钮是否退出指引
exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
showStepNumbers: false, // 是否显示步骤编号
disableInteraction: true, // 是否禁用高亮显示框内元素的交互
showBullets: true, // 是否显示面板的指示点
overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
helperElementPadding: 10, // 选中的指引元素周围的填充距离
});
export default intro;另外，Intro.js官方總共提供了6個不同的主題：Classic、Royal、Nassim、Nazanin、Dark、Modern，各主題的顯示效果可在官網查看。預設使用的是Classic，如果想使用其他主題，需引入 “intro.js/themes” 文件下對應的css文件，如下圖。這裡我用的是 “introjs-modern.css”。
2、引入設定檔
在需要新增使用者指引的檔案中引入introConfig.js檔案:
import intro from "@/utils/introConfig.js";
3、設定指引步驟並啟動
在具體的使用檔案中，透過setOptions 的steps屬性設定指引步驟，它是陣列類型，每一項都對應一個指引步驟，其中的字段含義如下：
element：定位到相應的元素位置，如果不設置，則預設展示在螢幕中央
title：指引彈跳窗的標題
intro：指引弹窗的文本内容，可插入html内容
示例如下：
methods: {
guide() {
intro.setOptions({
steps: [
{
element: document.querySelector('#step1'), // 定位到相应的元素位置，如果不设置element，则默认展示在屏幕中央
title: 'Welcome', // 标题
intro: 'Hello World! ?' // 内容
},
{
element: document.querySelector('#step2'),
intro: '有关如何配置/自定义该项目的指南和方法，请查看vue-cli文档。'
},
{
element: document.querySelector('#step3'),
intro: '已安装的cli插件'
},
{
element: document.querySelector('#step4'),
intro: '基本链接'
},
{
element: document.querySelector('#step5'),
intro: '生态系统'
},
{
title: "开始体验吧！",
intro: `<img src="interesting.GIF" alt="" style="max-width:90%" class="specialImg"/>`
},
]
});
this.$nextTick(() => {
intro.start();
})
}
},
mounted() {
this.$nextTick(() => {
this.guide();
})
}上述代码中，guide() 方法里配置了指引步骤和开始指引；并在 mounted 生命周期中调用 guide() 方法以展示指引内容。需要注意的是，为确保指引信息在原始页面渲染完毕后调用，需要在 $nextTick() 中调用 guide() 方法。
4、Demo效果
本demo仅用作讲解如何使用Intro.js，并未修改原始样式，比较简陋，还请包涵，实际使用时需要根据实际需要自定义样式。点击查看demo代码，效果如下图：
必须在原始页面渲染完毕后再加载intro.js
如果原始界面没有完全渲染完毕，可能存在intro.js无法找到指定元素的情况，可通过this.$nextTick()解决
实际使用中可能存在一些复杂的交互场景，可借助一些API来解决
introJs.onexit(providedCallback)：退出用户指引时触发 introJs.onchange(providedCallback)：步骤改变时触发 introJs.onbeforechange(providedCallback)：步骤改变前触发 introJs.onafterchange(providedCallback)：步骤改变后触发
如果现有主题无法满足需求，可以通过设置tooltipClass来自定义样式
以上是淺析vue專案中如何使用Intro.js實作使用者指引功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
