当前位置 博文首页 > 纸飞机博客：vue通过driver.js来实现用户引导提示
yarn add driver.js
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
外部建立一个steps,js
element代表元素的id（指定区域的盒子一定要带上定义的id），其余参数根据个人喜好而定。
const steps = [
{
element: '#data-litle',
popover: {
title: 'data-litle',
description: '通过此处可以了解平台运行总体情况',
position: 'bottom'
}
},
{
element: '#data-list',
popover: {
title: 'data-litle',
description: '通过此处可以了解平台运行总体情况',
position: 'bottom'
}
},
{
element: '#data-bar',
popover: {
title: 'data-bar',
description: '这里可以看见最近设备的分布情况',
position: 'bottom'
},
padding: 0
}
]
export default steps
引入steps.js文件
import steps from './steps'
<div class="welcome">
<div class="text">Hi，欢迎使用应用管理平台!</div>
<div class="tip">轻松创建、部署、和管理你的应用，提升研发效率，降低业务成本。<svg-icon icon-class="education" /><span class="guide" @click.prevent.stop="guide()">开启引导</span></div>
</div>
事件触发**@click.prevent.stop**(一定要这么写，否则无效)
this.driver.defineSteps(steps)
this.driver.start()
