轻骑兵使用driver.js踩坑

1 安装哪个版本

建议安装 0.9.8 原版。

yarn add driver.js@0.9.8

2 怎么引入、使用

不要提成文件，在页面里面使用就可以。

vue-page.vue template

<el-form-item prop="username" :class="{user:isValidateUserName}" class="username"
id="create-post1"
>
...
</el-form-item>
<el-form-item prop="p_d"
id="create-post2"
>
...
</el-form-item>

vue-page.vue script import

import 'driver.js/dist/driver.min.css'
import '@/assets/css/driver.polyfill.css'
import Driver from 'driver.js'

vue-page.vue script use

mounted(){
      const driver = new Driver({
        doneBtnText: '完成',
        closeBtnText: '关闭',
        // stageBackground: '#fff',
        nextBtnText: '下一步',
        prevBtnText: '上一步',
      })
      driver.defineSteps([
        {
          element: '#create-post1',
          popover: {
            title: 'Title on Popover',
            description: 'Body of the popover'
          }
        },
        {
          element: '#create-post2',
          popover: {
            title: 'Title on Popover',
            description: 'Body of the popover'
          }
        }
      ])
      driver.start()
},

3 样式问题怎么解决

注意到上面那个 '@/assets/css/driver.polyfill.css'了吗？就是用来处理这个问题的。

里面也很简单

div#driver-highlighted-element-stage,
div#driver-page-overlay {
 background: transparent !important;
 outline: 5000px solid rgba(0, 0, 0, 0.75);
}

就这样。