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);
}
就这样。