用户指引

路径：/src/utils/DriverManager

说明：使用第三方driver.js实现用户指引，并设计配置方式，实现跨页面的跳转。

使用

已经将方法在main.js中混入，任何地方都能直接跳转到页面进进入指引。

DriverManager会自动加载guides文件夹中的配置，所以直接新建配置js就行。

在guides中新建一个module，参照已有文件和注释进行配置,如下：

/**
 *1.需要流程配置的页面，必须配置name。
 *2.flows数组中每一条数据对应一个页面，name是对应页面的name，path对应页面的路由。
 *3.getSteps中的that参数为页面中的this，driver参数是driver.js（指引库）的实例。
 */
export default {
  code: 'bindMeter', // 此流程定义的code
  name: '绑定仪表', // 此流程的名称
  flows: [
    {
      name: 'GatewayManager', // 页面定义的name
      path: '/basicData/gateway', // 页面路由
      getSteps: function(that, driver) {
        return [
          {
            element: '#gatewayAddBtn',
            popover: {
              title: '点击添加并编辑内容',
              description: '在弹出框内填入选择项目名称、网关识别号、心跳间隔，并点击确定。',
              position: 'right'
            },
            onHighlightStarted: () => {
              driver.moveNext()
            }
          },
          {
            element: '#gatewayAddBtn',
            popover: {
              title: '点击添加并编辑内容',
              description: '在弹出框内填入选择项目名称、网关识别号、心跳间隔，并点击确定。',
              position: 'right'
            }
          }
        ]
      }
    },
    {
      name: 'MeterManager', // 页面定义的name
      path: '/basicData/meter', // 页面路由
      getSteps: function(that, driver) {
        return [
          {
            element: '#meterAddBtn',
            popover: {
              title: '点击添加并编辑内容',
              description:
                '在弹出框中选择项目名称，网关识别号，仪表地址，仪表型号，回路名称，电压变比，电流变比等，点击确认。',
              position: 'right'
            }
          }
        ]
      }
    }
  ]
}

注意点：

1.code必须要填，DriverManager依靠此code找到对应配置，不可与其他配置重复。

2.flows中的name为页面组件name，必须填，否则找不到对应组件。path必须填，否则无法跳转。

3.getSteps方法返回的是drive.js中的配置，上网查看相应教程。

4.如果一页中只有一个指引，那它只有关闭按钮，此时若需要跳到下一页，则找不到下一步按钮，所以需要将此指引写两份，并在onHighlightStarted方法中调用driver.moveNext()直接到下一步。