推荐一款好用的页面引导库[Driver.js]，用原生JS实现的，gizpped只有5.9kb大小；
1.安装
#用npm安装
npm install driver.js
## 用yarn安装
yarn add driver.js
- 使用
<template>
<div>
<div id="first" class="hello">
<h1>{{ msg }}</h1>
</div>
<div id="second">
<h1>driverJS</h1>
</div>
</div>
</template>
<script>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
export default {
name: "HelloWorld",
props: {
msg: String,
},
created() {
this.useDriver();
},
methods: {
useDriver() {
const driverObj = driver({
showProgress: true,
// element是页面DOM的id或class，popover对象是弹窗内容部分，是不是很简单
steps: [
{
element: "#first",
popover: {
title: "Animated Tour Example",
description:
"Here is the code example showing animated tour. Let's walk you through it.",
side: "left",
align: "start",
},
},
{
element: "#second",
popover: {
title: "Import the Library",
description:
"It works the same in vanilla JavaScript as well as frameworks.",
side: "bottom",
align: "start",
},
},
{
element: "#three",
popover: {
title: "Import the img file",
description:
"driver js will automatically load the image file for you.",
side: "bottom",
align: "start",
},
}
],
});
driverObj.drive();
},
},
};
</script>
<style scoped>
#first {
background: #42b983;
}
#second {
background: #737bea;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
