课程名称：基于Vue3最新标准，实现后台前端综合解
课程章节： 第一章
课程讲师：Sunday
课程内容
所谓 guide 指的就是 引导页
引导页是软件中经常见到的一个功能，无论是在后台项目还是前台或者是移动端项目中。
通常情况下引导页是通过 聚焦 的方式，高亮一块视图，然后通过文字解释的形式来告知用户该功能的作用。
高亮某一块指定的样式
在高亮的样式处通过文本展示内容
用户可以进行下一次高亮或者关闭事件
首先在组件内创建 guide.vue
<template>
<div>
<el-tooltip :content="$t('msg.navBar.guide')">
<svg-icon icon="guide" />
</el-tooltip>
</div>
</template>
<script setup></script>
<style scoped></style>然后引入
<guide class="right-menu-item hover-effect" /> import Guide from '@/components/Guide'
然后使用 driver.js
npm i driver.js@0.9.8
<script setup>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import { onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
let driver = null
onMounted(() => {
driver = new Driver({
// 禁止点击蒙版关闭
allowClose: false,
closeBtnText: i18n.t('msg.guide.close'),
nextBtnText: i18n.t('msg.guide.next'),
prevBtnText: i18n.t('msg.guide.prev')
})
})
</script>创建 steps.js
const steps = i18n => {
return [
{
element: '#guide-start',
popover: {
title: i18n.t('msg.guide.guideTitle'),
description: i18n.t('msg.guide.guideDesc'),
position: 'bottom-right'
}
},
{
element: '#guide-hamburger',
popover: {
title: i18n.t('msg.guide.hamburgerTitle'),
description: i18n.t('msg.guide.hamburgerDesc')
}
}
]}export default steps在需要高亮显示的地方 使用id="" 这样子 组件就会自动展示引导了