【金秋打卡】第21天 引导页 guide

课程名称：基于Vue3最新标准，实现后台前端综合解

课程章节： 第一章

课程讲师：Sunday

课程内容

    

     所谓 guide 指的就是 引导页

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

        通常情况下引导页是通过 聚焦 的方式，高亮一块视图，然后通过文字解释的形式来告知用户该功能的作用。

        

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

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

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

首先在组件内创建 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=""   这样子 组件就会自动展示引导了