vue3 Driver.js 页面分步引导

前言

当用户第一次使用一个网站时，通常会有一个新手引导，用于指导用户网站相关功能的信息，帮助用户快速的熟悉整个网站。本文主要记录下如何实现网站的新手引导功能。

一、安装依赖

官网地址：Driver

npm i driver.js

 二、引入

在组件内引入

import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'

三、使用

具体实现完整代码如下：

<template>
  <div>
    <p className="color">首页</p>
    <el-button @click.prevent.stop="handleGuide()">新手引导</el-button>
  </div>
</template>
 
<script lang="ts" setup>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
 
const steps = [
  {
    element: '.collapse-btn', // DOM 节点
    stageBackground: 'pink', // 内容的背景颜色样式
    popover: { // 分步内容的主体
      title: '菜单折叠按钮', // HTML 标签 title
      description: '你可以点击这里折叠或者展开左侧菜单', // 分步引导中的描述部分
      position: 'right' // 相对于高亮的部分，分步内容的位置
    }
  },
  {
    element: '.header-right',
    popover: {
      title: '设置主题颜色',
      description: '你可以在这里设置喜爱的主题颜色',
      position: 'left'
    }
  }
]
 
const driver = new Driver({
  className: 'scoped-class', // 包装类名
  animate: true, // 是否开启动画
  stageBackground: '#fff', // 突出显示元素的背景颜色
  opacity: 0.75, // 遮罩层不透明度（0表示仅弹出且不覆盖）
  padding: 0, // 边距
  allowClose: false, // 点击遮罩层是否关闭
  overlayClickNext: false, // 叠加点击时是否移动到下一步
  doneBtnText: '完成', // 结束按钮文字
  closeBtnText: '跳过', // 关闭按钮的文字
  nextBtnText: '下一步', // 下一步按钮的文字
  prevBtnText: '上一步', // 上一步按钮的文字
  keyboardControl: true, // 允许通过键盘进行控制（esc 退出，箭头键移动）,
 
})
const handleGuide = () => {
  driver.defineSteps(steps)
  driver.start()
}
</script>
 
<style scoped lang="scss">
.color {
  color: $redColor;
}
</style>

四、效果