driver.js实现前端页面引导

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>