vue中使用driver.js

driver.js是用来做页面分页引导的插件。

安装

安装命令:

1
npm install driver.js

调用

在需要使用引导的模块中调用

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import steps from "@/utils/defineSteps"; //用来存放引导的步骤
...
data(){
return {
driver:null
}
},
mounted() {
this.$nextTick(function () {
this.driver = new Driver({
doneBtnText: "完成", //结束按钮的文字
stageBackground: "#ffffff", 突出显示元素的背景颜色
nextBtnText: "下一步", //下一步按钮的文字
prevBtnText: "上一步", //上一步按钮的文字
closeBtnText: "关闭" //关闭按钮的文字
onHighlightStarted:(Element)=> {},//元素即将突出显示时调用
onHighlighted:(Element)=> {},//元素完全突出显示时调用
onDeselected:(Element)=> {},//取消选择元素时调用
onReset:(Element)=> {},//当要清除叠加时调用
onNext:(Element)=> {},//在任何步骤中移动到下一步时调用
onPrevious :( Element)=> {},//在任何步骤中移动到上一步时调用

});
this.driver.defineSteps(steps);
this.driver.start()
})
},

编辑步骤

创建defineSteps.js

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
export const steps=[
{
element: '.step1', //显示高亮的元素
popover: {
title: '步骤1', //引导标题
description: '先填写步骤1', //引导描述
position: 'right' //引导出现的位置
}
}
...
]

export default steps

扫一扫,请老师喝水