效果图
第一步：安装
npm install driver.js --save
第二步：页面引用
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
第三步：GuideStep.vue页面使用
html与css样式的代码：
<template>
<div>
<Button type="primary" icon="md-help" @click.prevent.stop="guide">帮助</Button>
<div style="margin-top: 20px">
<div class="a"></div>
<div id="b" class="b"></div>
<div class="c"></div>
<div id="d" class="d"></div>
</div>
</div>
</template>
<style scoped>
.a {
width: 100px;
height: 100px;
background-color: #42b983;
margin-left: 600px;
}
.b {
width: 100px;
height: 100px;
background-color: #4093ff;
margin-left: 600px;
}
.c {
width: 100px;
height: 100px;
background-color: #2c3e50;
margin-left: 600px;
}
.d {
width: 100px;
height: 100px;
background-color: #555555;
margin-left: 600px;
}
</style>
第四步：点击按钮调用的方法
methods: {
guide() {
this.driver.defineSteps(steps)
this.driver.start()
}
}
第五步： mounted加载
mounted() {
this.driver = new Driver()
},
第六步：guide方法中steps代码的引入与文件
引入：
const steps = [
{
element: ".a",
popover: {
title: "盒子1",
description: "这是第一个盒子",
position: "right",
},
},
{
element: "#b",
popover: {
title: "盒子2",
description: "这是第二个盒子",
position: "right",
},
},
{
element: ".c",
popover: {
title: "盒子3",
description: "这是第三个盒子",
position: "left",
},
},
{
element: "#d",
popover: {
title: "盒子4",
description: "这是第四个盒子",
position: "left",
},
},
]
export default steps
完整版代码如下
两个文件：
GuideStep.vue文件
<template>
<div>
<Button type="primary" icon="md-help" @click.prevent.stop="guide">帮助</Button>
<div style="margin-top: 20px">
<div class="a"></div>
<div id="b" class="b"></div>
<div class="c"></div>
<div id="d" class="d"></div>
</div>
</div>
</template>
<script>
import Driver from "driver.js"; // import driver.js
import "driver.js/dist/driver.min.css"; // import driver.js css
import steps from "./steps";
export default {
data() {
return {
driver: null,
};
},
methods: {
guide() {
this.driver.defineSteps(steps);
this.driver.start();
},
},
mounted() {
this.driver = new Driver();
},
};
</script>
<style scoped>
.a {
width: 100px;
height: 100px;
background-color: #42b983;
margin-left: 600px;
}
.b {
width: 100px;
height: 100px;
background-color: #4093ff;
margin-left: 600px;
}
.c {
width: 100px;
height: 100px;
background-color: #2c3e50;
margin-left: 600px;
}
.d {
width: 100px;
height: 100px;
background-color: #555555;
margin-left: 600px;
}
</style>
step.js文件：
const steps = [
{
element: ".a",
popover: {
title: "盒子1",
description: "这是第一个盒子",
position: "right",
},
},
{
element: "#b",
popover: {
title: "盒子2",
description: "这是第二个盒子",
position: "right",
},
},
{
element: ".c",
popover: {
title: "盒子3",
description: "这是第三个盒子",
position: "left",
},
},
{
element: "#d",
popover: {
title: "盒子4",
description: "这是第四个盒子",
position: "left",
},
},
]
export default steps
参考文章：
https://blog.csdn.net/zzzz121380/article/details/126480101