vue項(xiàng)目中怎么實(shí)現(xiàn)用戶指引功能？下面本篇文章給大家介紹一下在vue項(xiàng)目中使用Intro.js實(shí)現(xiàn)用戶指引功能的方法，希望對(duì)大家有所幫助！

前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

系統(tǒng)發(fā)布新版本或者上線新功能后，為方便用戶快速了解新功能，通常需要添加一些用戶指引界面。

常見的用于實(shí)現(xiàn)用戶指引的插件有：Intro.js、Shepherd、vue-tour、Driver.js等。這些插件各有利弊，本文將基于vue項(xiàng)目介紹如何使用Intro.js實(shí)現(xiàn)用戶指引。（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）

什么是Intro.js

Intro.js 是一個(gè)開源的 Javascript / CSS 庫，用于添加分步介紹或提示。具備如下優(yōu)點(diǎn)：

• 無依賴：不需要其他任何依賴項(xiàng)。
• 小且快：文件體積小，引導(dǎo)過程流暢。其中，JavaScript文件的整體大小為10KB, CSS為2.5KB。
• 用戶友好：提供了多個(gè)主題，可根據(jù)個(gè)人喜好選擇使用。
• 瀏覽器兼容性：兼容所有主流的瀏覽器，包括：Chrome、Firefox、Opera、Safari和IE瀏覽器。
• 文檔完善：文檔中包含了要介紹的每個(gè)元素的內(nèi)容及示例。

API & options

Intro.js可以實(shí)現(xiàn)tour（顯式指引）和hint（隱式指引）兩種用戶指引形式（注：這兩種譯法是筆者自己取的，僅用于區(qū)分！?。。?。

其中，顯示指引更傾向于是對(duì)功能的簡(jiǎn)要介紹，其效果如下圖所示，通常是由遮罩層、選中的頁面元素、指引信息彈窗等共同組成。

隱式指引，則像是一種操作式的引導(dǎo)，鼓勵(lì)用戶參與其中，邊學(xué)邊用，其默認(rèn)效果如下圖所示，提示用戶點(diǎn)擊指定元素，隨后會(huì)顯示相應(yīng)的提示信息或進(jìn)入下一步操作等。

這兩種形式的用法核心在于選擇元素并預(yù)設(shè)指引信息。因此，本文將主要介紹tour的用法，hint的使用方法可以觸類旁通，參考tour的用法及 官方文檔中的demo 后可以輕松上手，便不在此贅述。

Tour API

Intro.js官方提供了很多Tour API，這里僅針對(duì)最常用的基礎(chǔ)API做介紹，完整的API介紹可查看官方API文檔。

introJs([targetElm])

用于創(chuàng)建一個(gè) introJs 的對(duì)象，可選參數(shù) targetElm 是一個(gè)字符串類型，指開始指引的特定元素，例如：“#intro-farm”。

introJs.start()

開始介紹定義的元素，即就是開始用戶指引。

introJs.setOptions(options)

為已創(chuàng)建的 introJs 對(duì)象設(shè)置一組選項(xiàng)。參數(shù) options 是一個(gè)對(duì)象類型，包括了指引中的所有信息，如：按鈕顯示文字、遮罩層透明度、提示文本等。

Tour options

常用option如下：

• nextLabel：下一個(gè)的按鈕文字
• prevLabel：上一個(gè)按鈕文字
• skipLabel：跳過指引的按鈕文字
• doneLabel：完成按鈕的文字
• hidePrev：是否在第一步中隱藏“上一步”按鈕;不隱藏，將呈現(xiàn)為一個(gè)禁用的按鈕
• hideNext：是否在最后一步中隱藏“下一步”按鈕（同時(shí)會(huì)隱藏完成按鈕);不隱藏，將呈現(xiàn)為一個(gè)禁用的按鈕
• exitOnEsc：點(diǎn)擊鍵盤的ESC按鈕是否退出指引
• exitOnOverlayClick：點(diǎn)擊遮罩層時(shí)是否退出介紹
• showStepNumbers：是否顯示步驟編號(hào)
• disableInteraction：是否禁用高亮顯示框內(nèi)元素的交互
• showBullets：是否顯示面板的指示點(diǎn)
• overlayOpacity：遮罩層的透明度 0-1之間
• helperElementPadding：選中的指引元素周圍的填充距離
• steps：引導(dǎo)框內(nèi)的相關(guān)參數(shù)配置，具體配置見下文

上述部分字段對(duì)應(yīng)的內(nèi)容如下圖所示，