1.安裝
npm install driver.js
2.實現代碼示例
<template><div class="home-container"><!-- 頁面內容 --><LeftPanel id="guide-left-panel" /><button id="guide-file-upload">文件上傳</button><button id="guide-hash-query">Hash查詢</button><TimelinePanel id="guide-right-timeline" /><!-- 引導按鈕（測試用） --><button @click="startGuide">開始引導</button></div>
</template><script setup>
import { onMounted } from 'vue';
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';const startGuide = () => {const driverObj = driver({steps: [{element: '#guide-left-panel',popover: {title: '步驟1：左側功能區',description: '包含安全引擎矩陣和快捷入口'}},{element: '#guide-file-upload',popover: {title: '步驟2：文件上傳',description: '上傳文件進行檢測'}},{element: '#guide-hash-query',popover: {title: '步驟3：Hash查詢',description: '輸入哈希值快速查詢'}},{element: '#guide-right-timeline',popover: {title: '步驟4：檢測記錄',description: '查看歷史檢測結果'}}]});driverObj.drive();
};// 頁面加載后啟動引導
onMounted(() => {starDrive()
});const starDrive = async () => {await nextTick();startGuide()
}
</script>
)
