前端Driver.js引导用户

一.什么是Driver.js ?

官网上说讲：

Driver.js是页面分部引导的JavaScript,通过 Driver.js
，你可以突出显示页面上的项目，以吸引用户的注意力。你也可以在网站改版后，使用它来引导用户展示新功能

。

二.怎么使用Driver.js?（主要是在vue中）

(1)首页使用命令 npm install driver.js

(2) 在main.js中引入

import Driver from ‘driver.js’
import ‘driver.js/dist/driver.min.css’
Vue.prototype.$driver = new Driver({
allowClose: false,
doneBtnText: ‘完成’,
closeBtnText: ‘关闭’,
stageBackground: ‘#fff’,
nextBtnText: ‘下一步’,
prevBtnText: ‘上一步’,
})

（3）如果你想做成一个通用的，可以在components文件夹下创建Driver.js

const guider = [ element: ‘#demo1’,
popover: {
title: ‘演示标题1’,
description: ‘这是详细描述\n’,
position: ‘bottom-center’
} ]

(4)在你想要使用的页面引用import {guider } from ‘@/components/Driver’

(5)在你的点击事件或其他事件中使用

this.$driver.defineSteps(guider);this.$driver.start();

Driver.js官网地址：https://f2ex.cn/driver-js/