最近有写一个新手指引的功能, 和大家分享一下实现过程
对于没有提供操作文档, 一般情况下, 会引导用户去熟悉系统
我们就来写一个简单的实例, 来了解一下Driver.js的使用
Driver.js
现在, 我们下载一下Driver.js
npm install driver.js
pnpm install driver.js
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
但是呢, 点着点着会发现弹窗出现了, 描述没有关闭
这种呢, 我们可以在用户点击新增的时候, 将其关闭即可
简单的流程功能大致是实现了, 根据不同的场景, 我们灵活运用就可以啦
前一段打算写篇文章, 一直搁置了, 后面给大家补上
