页面引导我们都不陌生,伴随点击,页面会聚焦到某个部分,其他部分变暗,并引导使用者按照特定的顺序进行操作。
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' //阴影的颜色,默认为黑
结语
到这里,已经足够完成一个页面引导效果了,如果小伙伴们有更多的需求,例如异步或者样式的重构,可以去官方文档进行查阅,链接在下方,如果觉得本文有对你有用的话,可以点个赞收藏一下哦~