最近有写一个新手指引的功能, 和大家分享一下实现过程

对于没有提供操作文档, 一般情况下, 会引导用户去熟悉系统

我们就来写一个简单的实例, 来了解一下Driver.js的使用

https://driverjs.com/docs/installation
Driver.js
现在, 我们下载一下Driver.js

Using npm

npm install driver.js

Using pnpm

pnpm install driver.js

Using yarn

yarn add driver.js
安装完成之后, 在main.js中引入所需样式

import ‘driver.js/dist/driver.css’
引入完成之后, 我们创建一个index路由, 并写一个简单结构的页面

页面写好之后, 我们来说一下需求, 我们进入页面引导用户走很多流程, 最后高亮新增按钮, 用户点击新增会弹出弹窗, 当我们点击弹窗的保存并退出的时候, 伪创建一条数据, 再进行卡片的操作指引

首先呢, 我们给header部分添加几个按钮, 用来伪实现前面需要走的很多流程

现在, 我们在组件中引入driver

import { driver } from ‘driver.js’
引入之后, 我们使用变量接收一下

const driverObj = driver()
先实现一下局部区域高亮, 大家先体验一下效果

这样一个效果, 我们需要给要高亮的元素绑定id标识

我们上面不是用一个变量进行接收吗? 现在我们直接用它身上的highlight方法

这样单个高亮就可以了

接下来, 来实现一下流程指引, 先给上面四个按钮绑定上id

随后, 我们就一通配置, 先加一个steps数组, 在里面, 可以添加需要高亮的流程指引

side可以配置高亮描述出现的位置, 是位于dom元素的左右展示还是上下展示, align可以配置弹出框和元素的对齐方式

现在效果是有了, 来更改一下上一步下一步的文字展示

可以通过上面三个配置, 来修改按钮标题

这个功能实现之后, 我们写个弹窗组件

const emit = defineEmits([‘change’])
当我们点击保存并退出时, 我们触发change事件, 来执行父组件的逻辑

首先需要新增一条元素

const list = ref([])
const handleChange = () => {
list.value = [
{
id: 1,
name: 123,
},
]
}

dom也有了, 但是, 我再打开关闭的时候, 不想要再高亮, 我们可以用一个变量来判断, 为了演示, 我就简单加一个num, 根据特殊情况一般这个变量需要加在store中

这样我们的功能就实现了

但是, 用户点击空白, 流程还是会自动取消, 这个怎么来做呢?

我们只需要加一个配置项

allowClose: false
但是呢, 点着点着会发现弹窗出现了, 描述没有关闭

这种呢, 我们可以在用户点击新增的时候, 将其关闭即可

简单的流程功能大致是实现了, 根据不同的场景, 我们灵活运用就可以啦

前一段打算写篇文章, 一直搁置了, 后面给大家补上

今天我们就讲解到这里

我们下期见