一、安装
yarn add driver.js
二、在需要的页面引入并使用
一）基本使用
<template>
<div class="test-guide">
<h1>测试driver.js</h1>
<el-button id="guide-ele" type="primary">我是第一步</el-button>
</div>
</template>
<script>
import "driver.js/dist/driver.min.css";// 引入css
import Driver from "driver.js"; // 引入库
export default {
mounted() {
this.showTips();
},
methods: {
showTips() {
const driver = new Driver();
driver.highlight({
element: "#guide-ele",
stageBackground: "#ffa0a0",
popover: {
title: "温馨提示",
description: "这是本站的首页",
position: "bottom",
className: "first-step"
}
});
}
}
};
</script>
<style lang="scss">
.test-guide {
color: #ffa0a0;
}
.first-step {
// 必须放在最外层，因为它是body标签的直属下级
.driver-popover-title {
// 重写title样式
color: red;
}
}
</style>
二）提供步骤，以指导用户有关功能的信息 （刷新或者再次打开该网页仍有引导）
<template>
<div class="test-guide">
<h1>测试driver.js</h1>
<el-button id="first-ele" type="primary">首页</el-button>
<el-button id="second-intro" type="warning">帮助</el-button>
<el-button id="third-des" type="primary">联系我们</el-button>
</div>
</template>
<script>
import "driver.js/dist/driver.min.css";
import Driver from "driver.js";
export default {
mounted() {
this.showTips();
},
methods: {
showTips() {
const driver = new Driver({
prevBtnText: "上一步",
nextBtnText: "下一步",
doneBtnText: "我知道了",
closeBtnText: "关闭"
});
const steps = [
{
element: "#first-ele",
popover: {
title: "这是本站首页",
description: "本站首页是一些展示性的信息",
position: "bottom"
}
},
{
element: "#second-intro",
popover: {
title: "这是帮助",
description: "点此处可获取一些本站的相关说明",
position: "top"
}
},
{
element: "#third-des",
popover: {
title: "联系我们",
description: "点击这里可获取我们的相关信息",
position: "right"
}
}
];
driver.defineSteps(steps);
driver.start();
}
}
};
</script>
<style lang="scss">
.test-guide {
color: #ffa0a0;
}
</style>
三）新手引导，当用户第一次访问该网站的时候，才有新手引导，刷新或者再次打开该网页 ，无引导
<template>
<div class="test-guide">
<h1>测试driver.js</h1>
<el-button id="first-ele" type="primary">首页</el-button>
<el-button id="second-intro" type="warning">帮助</el-button>
<el-button id="third-des" type="primary">联系我们</el-button>
</div>
</template>
<script>
import "driver.js/dist/driver.min.css";
import Driver from "driver.js";
export default {
mounted() {
let flag = localStorage.getItem("firstVisit");
if (!flag) {
// flag不存在，即当用户第一次访问该网页的时候，调用showTips，显示新手引导
this.showTips();
}
},
methods: {
showTips() {
const driver = new Driver({
prevBtnText: "上一步",
nextBtnText: "下一步",
doneBtnText: "我知道了",
closeBtnText: "关闭",
onReset: ele => {
//Called when overlay is about to be cleared； 用户关闭了新手引导，此时需设置firstVisit，表明该用户已经访问过该网页(不是第一次访问），下次在同一台电脑上再打开该网页的时候，将不再显示新手引导（用户手动清除缓存的情况除外)
localStorage.setItem(
"firstVisit",
JSON.stringify({
firstVisit: false })
);
}
});
const steps = [
{
element: "#first-ele",
popover: {
title: "这是本站首页",
description: "本站首页是一些展示性的信息",
position: "bottom"
}
},
{
element: "#second-intro",
popover: {
title: "这是帮助",
description: "点此处可获取一些本站的相关说明",
position: "top"
}
},
{
element: "#third-des",
popover: {
title: "联系我们",
description: "点击这里可获取我们的相关信息",
position: "right"
}
}
];
driver.defineSteps(steps);
driver.start();
}
}
};
</script>
<style lang="scss">
.test-guide {
color: #ffa0a0;
}
</style>
它还提供了一些方法，更多相关信息，请移步：driverjs