后台管理系统引导功能的实现

引导是软件中经常见到的一个功能，无论是在后台项目还是前台或者是移动端项目中。

那么对于引导页而言，它是如何实现的呢？通常情况下引导页是通过聚焦的方式，高亮一块视图，然后通过文字解释的形式来告知用户该功能的作用。

所以说对于引导页而言，它的实现其实就是：页面样式的实现。

我们只需要可以做到：

1. 高亮某一块指定的样式；

2. 在高亮的样式处通过文本展示内容；

3. 用户可以进行下一次高亮或者关闭事件；

那么就可以实现对应的引导功能。

对于引导页来说，市面上有很多现成的轮子，所以我们不需要手动的去进行以上内容的处理，我们这里可以直接使用 driver.js 进行引导页处理。

实现方案如下：

1. 安装插件

npm i driver.js@0.9.8

2. 创建组件

<template><div><el-tooltip content="引导"><svg-icon id="guide-start" icon="guide" @click="onClick" /></el-tooltip></div>
</template><script setup>
import Driver from "driver.js";
import { onMounted } from "vue";
import "driver.js/dist/driver.min.css";let driver = null;onMounted(() => {initDriver();
});const initDriver = () => {driver = new Driver({animate: true,// 禁止点击蒙版关闭allowClose: false,popoverOffset: 0,closeBtnText: "关闭",nextBtnText: "下一个",prevBtnText: "上一个",});
};// 定义导向步骤
const steps = () => {return [{element: "#guide-start",popover: {title: "引导",description: "打开引导功能",position: "bottom-right",},},{element: "#guide-hamburger",popover: {title: "汉堡按钮",description: "打开和关闭左侧菜单",},},{element: "#guide-search",popover: {title: "搜索",description: "页面链接搜索",position: "bottom-right",},},{element: "#guide-full",popover: {title: "全屏",description: "页面显示切换",position: "bottom-right",},},{element: "#guide-theme",popover: {title: "主题",description: "更换项目主题",position: "bottom-right",},},{element: "#guide-lang",popover: {title: "国际化",description: "语言切换",position: "bottom-right",},},];
};const onClick = () => {driver.defineSteps(steps());driver.start();
};
</script>

上面组件中的svg-icon标签为自定义封装的全局注册过的组件，也可以用其它图标代替，点击《Vue 3.0 中封装icon组件使用外部SVG图标》查看组件如何封装。