? Github Star: 22.7k[1]
? 官網(wǎng)[2]
1、Intro.js 是什么？
Intro.js 是一款用于創(chuàng)建新用戶引導(dǎo)和產(chǎn)品介紹的 JavaScript 開(kāi)源庫(kù)。允許通過(guò)簡(jiǎn)單的代碼快速添加交互式引導(dǎo)步驟，可以高亮頁(yè)面上特定元素，添加描述性的文本，幫助用戶了解如何使用網(wǎng)站的功能。
特點(diǎn)
? 易于使用：通過(guò)簡(jiǎn)單的API和配置選項(xiàng)，可以快速集成到任何項(xiàng)目中。
? 高度可定制：可以自定義樣式、步驟、動(dòng)畫(huà)等，以適應(yīng)不同的設(shè)計(jì)需求。
? 響應(yīng)式設(shè)計(jì)：支持響應(yīng)式布局，確保在不同設(shè)備上都能良好顯示。
? 多語(yǔ)言支持：可以為不同的用戶群體提供不同語(yǔ)言的引導(dǎo)。
2、核心 API
Intro.js 提供了兩種主要的功能 Tour 和 Hints。
Tour
Tour 是一個(gè)引導(dǎo)用戶通過(guò)應(yīng)用程序或網(wǎng)站的功能點(diǎn)的向?qū)АＫǔＳ糜谛掠脩粢龑?dǎo)、功能演示或突出新功能。
Hints
Hints 是一種輕量級(jí)的提示，用于在用戶界面上標(biāo)記特定的元素，以提醒用戶注意某些功能或操作。
Tour 更適合于全面的用戶引導(dǎo)，通過(guò)一系列的步驟來(lái)展示應(yīng)用程序的不同部分。Hints 更適合于提供快速的提示和反饋，通常用于標(biāo)記特定的界面元素。根據(jù)需求選擇使用。
3、快速開(kāi)始
安裝
Intro.js 沒(méi)有任何依賴，可以通過(guò) npm、yarn 和 CDN 直接安裝。
npm install intro.js --save
# 或
yarn add intro.js
通過(guò) CDN 引入 Intro.js 時(shí)需要注意， intro.js 文件鏈接需要放在 </body> 標(biāo)記之前。 introjs.css 鏈接需要放在 <head> 中。
入門示例
Intro.js 提供了兩種使用方式，第一種直接在 HTML 中添加屬性，并調(diào)用 introJs().start() 即可。
<template>
<div data-title="Welcome!" data-intro="Hello World!">hello!</div>
</template>
<script setup>
import introJs from 'intro.js' // 引入intro.js
import 'intro.js/introjs.css' // intro.js的基礎(chǔ)樣式文件
import { nextTick, onMounted } from 'vue';
onMounted(() => {
nextTick(() => {
introJs().start()
})
})
</script>
通過(guò) HTML 屬性方式配置靈活性比較低，另一種我們可以通過(guò) Options 對(duì)象使用 JSON 自定義配置。
// 初始化-基礎(chǔ)配置項(xiàng)
const introConfig = () => {
const intro = introJs()
intro.setOptions({
nextLabel: '下一步', // 下一個(gè)的按鈕文字
prevLabel: '上一步', // 上一個(gè)按鈕文字
skipLabel: '跳過(guò)', // 跳過(guò)指引的按鈕文字
doneLabel: '完成', // 完成按鈕的文字
hidePrev: false, // 是否在第一步中隱藏“上一步”按鈕;不隱藏，將呈現(xiàn)為一個(gè)禁用的按鈕
hideNext: false, // 是否在最后一步中隱藏“下一步”按鈕（同時(shí)會(huì)隱藏完成按鈕);不隱藏，將呈現(xiàn)為一個(gè)禁用的按鈕
exitOnEsc: false, // 點(diǎn)擊鍵盤的ESC按鈕是否退出指引
exitOnOverlayClick: false, // 點(diǎn)擊遮罩層時(shí)是否退出介紹
showStepNumbers: false, // 是否顯示步驟編號(hào)
disableInteraction: true, // 是否禁用高亮顯示框內(nèi)元素的交互
showBullets: true, // 是否顯示面板的指示點(diǎn)
overlayOpacity: 0.7, // 遮罩層的透明度 0-1之間
helperElementPadding: 10, // 選中的指引元素周圍的填充距離
})
}
配置指引步驟，其中，steps 這是一個(gè)數(shù)組，定義了引導(dǎo)游的每個(gè)步驟。
// 配置引導(dǎo)步驟
const guide = () => {
const intro = introConfig()
intro.setOptions({
steps: [
{
// 指定要高亮顯示的 DOM 元素的選擇器或 DOM 元素本身。
element: document.querySelector('#guide'),
title: 'Welcome',
// 顯示在步驟中的介紹文本。
intro: 'Hello World! ??',
},
],
})
nextTick(() => {
intro.start()
})
}
上面兩種方式實(shí)現(xiàn)的效果相同，效果如下：
4、總結(jié)
Intro.js 一個(gè)簡(jiǎn)單、靈活功能豐富的引導(dǎo)庫(kù)，提供了高度自定義、包括步驟、樣式和導(dǎo)航選項(xiàng)，幫助你無(wú)縫融入到項(xiàng)目中。本文主要介紹了 Intro.js 的功能，以及在 Vue 的使用方式，創(chuàng)建了簡(jiǎn)單的示例。希望能夠充實(shí)你的組件庫(kù)。
祝好！
引用鏈接
[1] Github Star: 22.7k: https://github.com/usablica/intro.js
[2] 官網(wǎng): https://introjs.com/
該文章在 2024/10/12 9:59:31 編輯過(guò)
400 186 1886
