安装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()
效果
