vue-element-admin小集（二）插件使用

1.driver.js使用

作用：用于页面引导说明项
使用步骤：

1. 安装插件并在文件中引入

npm install driver.js // 下载
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';  // 引入

2. 在生命周期mouted中去初始化

mounted () {
  this.driver = new Driver()
}

3. 配置说明引导项

// html部分
<template>
    <div id="hamburger-container" class="hamburger-container">1111111</div>
    <div id="breadcrumb-container" class="breadcrumb-container">2222</div>
    <el-button type="info" plain @click.prevent.stop="handleMove">按钮</el-button>
</template>

// js部分
handleMove () {
  // Define the steps for introduction
  this.driver.defineSteps([
    {
      element: '#hamburger-container',
      popover: {
        title: '盒子1',
        description: '这是第一个盒子',
        position: 'top'
      }
    },
    {
      element: '#breadcrumb-container',
      popover: {
        title: '盒子2',
        description: '这是第二个盒子',
        position: 'bottom'
      }
    }
  ])
  // Start the introduction
  this.driver.start()
}

效果图