vue 自定义蒙层引导

自定义蒙层指引

安装

npm i driver.js

实现

//guide.js
import Vue from 'vue'
import Driver from "driver.js";
import  "driver.js/dist/driver.min.css";
import "../assets/guide.css";


Vue.prototype.$driver=new Driver({
    className:"guideWrap",//新手指引的容器名字，标号1的地方
    padding:0,
    animate:true,
    allowClose:false,
    keyboardControl:true,
    showButtons:false,
    stageBackground:'transparent',
    overlayClickNext:false,//点击是否允许蒙层关闭，
    onHighlightStarted:(Element)=>{
        setTimeout(() => {
           let {popover} = Element.options
           let newWrap=document.createElement('div')
           let newElement=`
${popover.className}">`
let ftlHtml = document.querySelector('#driver-popover-item')
console.log(newElement);
newWrap.innerHTML=newElement
ftlHtml.append(newWrap)
}, 500);
}
})
export default [
{
element:'.right-bottom ', //第一步指定位置的css选择器
popover:{
className:'step1',//可自定义
title:'这是第一步',
description:'我是第一部的描述语我是第一部的描述语我是第一部的描述语',
position:'left',
nextBtnText:'下一步',
showButtons:true,
allowClose:false
}
},
{
element:'.left-top ', //第一步指定位置的css选择器
popover:{
className:'step2',//可自定义
title:'这是第二步',
description:'我是第一部的描述语我是第一部的描述语我是第一部的描述语',
position:'right',
closeBtnText:'关闭',
showButtons:true,
allowClose:false
}
},
]

//guide.css
@import url('../../node_modules//driver.js/dist/driver.min.css');

#driver-popover-item.guideWrap{
    background-color: #fff;
    border-radius: 8px;
}
#driver-popover-item.step1{
    width: 300px;
    height: 150px;
}
#driver-popover-item .driver-popover-footer button{
    width: 88px;
    height: 32px;
    border-radius: 3px;
    background-color: cadetblue;
}
.newImage-step1{
    width: 163px;
    height: 100px;
    background: url('../assets/logo.png');
    position: absolute;
    left: -186px;
    top: 0;
}
.step1 [class*="driver-close-btn"]{
    visibility: hidden;
}
.step1 .driver-prev-btn.driver-disabled ,.step2 .driver-prev-btn{
    visibility: hidden;
}
.step2 .driver-brn-group{
    visibility: hidden;
}
.step2 .driver-next-btn{
    visibility: hidden;
}
.step2  .driver-next-btn{
    position: relative;
    left: 0;
    bottom: 50px;
}