开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

什么是Guide

用户使用新项目时，对项目功能不熟悉，开发人员通常会使用引导页的方式使用户快速熟悉项目功能。

通常引导页通过聚焦高亮一部分内容，通过文字解释告诉用户该功能的作用

实现

通过观察发现，我们需要做到

高亮目标区域
该区域功能文字描述
三个按钮的实现

对引导页，市面上有很多现成的第三方库可以使用，本文使用driver.js实现导航页

样式

首先实现基本样式

该样式可以使用element-plus Tooltip 文字提示

components/Guide/index.vue

<template>
  <div>
    <el-tooltip :content="$t('msg.navBar.guide')">
      <div @click="onClick" id="guide-start">
        <svg-icon icon="guide" />
      </div>
    </el-tooltip>
  </div>
</template>

我这里图标外加一个div为了解决提示文字不出现的问题

逻辑处理

安装driver.js

npm i driver.js@0.9.8

driver用法

初始化driver

components/Guide/index.vue

配置项如下图

用到的配置项

allowClose: 是否点击覆盖应该关闭
closeBtnText: 关闭按钮上的文本
nextBtnText: 上一步按钮上的文本
prevBtnText: 下一步按钮上的文本

<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>

然后需要处理driver.defineSteps()的数组参数，该数组为引导页的引导顺序及配置信息，由如下多个对象构成

element：高亮区域元素id
title：蒙版标题
description：蒙版内容
position：蒙版位置

{
  
  element: '#guide-start',
  popover: {
    title: i18n.t('msg.guide.guideTitle'),
    description: i18n.t('msg.guide.guideDesc'),
    position: 'bottom-right'
  }
},

将其数组中各对象配置信息补充完整这里新建js文件

steps.js

声明方法返回steps

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

为图标绑定点击事件

<div @click="onClick" id="guide-start">
    <svg-icon icon="guide" />
</div>

在点击事件中定义步骤，开始导航即可

import steps from './steps'

const onClick = () => {
  driver.defineSteps(steps(i18n))
  driver.start()
}

引导页完成

Guide导航实现

什么是Guide

实现

样式

逻辑处理