效果图
第一步:安装
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