如何做一个好看的页面引导效果？

       页面引导我们都不陌生，伴随点击，页面会聚焦到某个部分，其他部分变暗，并引导使用者按照特定的顺序进行操作。

driver.js（本次要使用的页面引导库）官网的demo引导示例

       正在开发的产品出了新的需求，对整个UI界面进行了革新，为了防止原来的客户找不到位置，产品让我在新需求上线时添加一个页面引导的效果，我之前并没有做过页面引导的经验，所以理所当然地在掘金和CSDN上进行寻找有关教程。

找了快一个小时，各种教程各种组件库用遍了，各种报错

       在确定driver.js作为页面引导库之后，我找到了官网，并看了新手引导，发现官网文档的引用方式和语法已经更新了，教程上的失效报错是必然的（果然官方文档才是YYDS）。虽然官方文档是英文，并不难读懂，但想着可能会有一点不方便，所以我决定把最新版本且适用度比较高的页面引导效果写下来，给急需做这个需求的小伙伴们使用。

让我们开始吧~

driver.js简介

       driver.js 是一个可以轻松实现新手指引交互的原生JS工具库，主要的作用是为刚接触应用的新手用户快速了解产品，帮助用户把注意力聚焦到某项功能，从而快速熟悉我们的开发的产品。

driver.js的安装及引用

1.在命令行中以npm方式安装driver.js

npm install driver.js

2.创建一个driverUsing.js文件，并在其中引用如下文件

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

3.在driverUsing.js中导入如下测试代码

export const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "start",
    description: "hello driver.js"
  }
});

4.在要使用引导的页面导入driverUsing.js(这里以vue3为例)

<script setup>
import driverObj from './driverUsing.js'
driverObj
</script>

5.运行后，出现下列界面，说明安装引用driver.js成功

基本的页面引导

       仿照driver.js的官方文档，我也做了一个用来展示的demo页面，以vue3组件的方式，来控制页面引导的起始

单纯的静态页面，还未添加页面引导效果

1.声明 driver-using.vue组件，并导入如下代码（官网的基本配置）

<script setup>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  showButtons: ['next', 'previous'],
  steps: [
    {
      element: '.avatar',
      popover: {
        title: '引导第一步',
        description: '这是kami的照片',
        side: "left", 
        align: 'start'
      }
    },
    {
      element: '.title',
      popover: {
        title: '引导第二步',
        description: '这是kami的标题',
        side: "left", 
        align: 'start'
      }
    },
    {
      element: '.description',
      popover: {
        title: '引导第三步',
        description: '这是kami的内容',
        side: "left", 
        align: 'start'
      }
    },
    {
      element: '.box',
      popover: {
        title: '引导第四步',
        description: '引导结束，喜欢的话可以点赞收藏哦~',
        side: "left", 
        align: 'start'
      }
    },
  ]
});

driverObj.drive();
</script>

2.在需要引导效果的页面进行导入

<template>
  <div class="box">
    <div class="box-left">
      <div class="title">kami页面引导</div>
      <div class="description">点击触发页面引导，跟随指引使用吧~</div>
      <div class="button" @click="start()">开始页面引导</div>
    </div>
    <div class="box-right">
      <img class="avatar" src="../assets/cat.png" alt="">
    </div>
     <!-- ***2.在需要引导的页面中使用 -->
    <driverUsing v-if="show"></driverUsing> 
  </div>
</template>

<script setup>
import {ref} from 'vue'
import driverUsing from '../components/driver-using.vue' //***1.导入封装好的driver组件

const show = ref(false)
const start = () => {
  show.value = true
}
</script>

<style>
.box {
  width: 1000px;
  height: 448px;
  margin: auto;
  margin-top: 120px;
  padding: 80px 50px;
  box-sizing: border-box;
  display:flex;
  justify-content: space-between;
}

.title {
  height: 128px;
  margin-bottom: 16px;
  font-size: 84px;
  font-weight: bolder;
}

.description {
  height: 36px;
  margin-bottom: 50px;
  font-size: 24px;
}

.avatar {
  width:300px;
}

.button {
  width:max-content;
  background-color: #eaf2ff;
  padding:10px 20px;
  border-radius: 10px; 
  margin:auto;
  cursor:pointer;
}
</style>

3.基本引导效果完成

修改配置

       接下来我会分别演示修改每个配置的效果，方便大家找到自己想要的效果（如果感兴趣推荐大家自己去试试看哦）

1.修改基本配置

  showProgress: true,                   //控制左下角的进度显示
  showButtons: ['next', 'previous'],    //控制按钮数组中按钮的显示隐藏
  steps: [
    {
      element: '.avatar',               //当前步骤卡片要聚焦到页面的哪个元素上
      popover: {
        title: '引导第一步',             //卡片标题
        description: '这是kami的照片',   //卡片内容
        side: "left",                   //卡片的展示方向
        align: 'start'                  //卡片的展示位置
      }
    }，
    ......
        ]

接下来对每个配置修改一个部分，进行展示（文本就不改了）

  showProgress: false,                   
  showButtons: ['next'],   
  steps: [
    {
      element: '.avatar',              
      popover: {
        title: '引导第一步',             
        description: '这是kami的照片',   
        side: "right",                  
        align: 'center'                  
      }
    }，
    ......
        ]

上面是修改前，下面是修改后

2.主题定制

       driver.js可以通过主题，来给引导卡片添加样式

      popover: {
        title: '引导第一步',             
        description: '这是kami的照片',   
        side: "right",                  
        align: 'center',
        popoverClass: 'kami-theme'  //添加定制主题样式
      }
......
<style>
/* 整体*/
.driver-popover.kami-theme {
  background-color: #eaf2ff;
  color: #000;
}

/* 标题 */
.driver-popover.kami-theme .driver-popover-title {
  font-size: 20px;
}

/* 内容 */
.driver-popover.kami-theme .driver-popover-description {
  color: #000;
}

/* 按钮 */
.driver-popover.kami-theme button {
  flex: 1;
  text-align: center;
  background-color: #1e80ff;
  color: #ffffff;
  text-shadow: none;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 6px;
}

/* 箭头，四个都要加上，因为卡片会随着你页面滚动位置发生变化 */
.driver-popover.kami-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #eaf2ff;
}
.driver-popover.kami-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #eaf2ff;
}
.driver-popover.kami-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #eaf2ff;
}
.driver-popover.kami-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #eaf2ff;
}
</style>

修改后的效果

3.其他的配置

  nextBtnText: '下一步', //按钮的文本，格式为'按钮名'+BtnText,不能在showButtons里修改文本
  allowClose: false,    //是否允许点击黑色部分关闭掉引导
  overlayColor: 'red'   //阴影的颜色，默认为黑

结语

       到这里，已经足够完成一个页面引导效果了，如果小伙伴们有更多的需求，例如异步或者样式的重构，可以去官方文档进行查阅，链接在下方，如果觉得本文有对你有用的话，可以点个赞收藏一下哦~

driver.js的官方文档