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;
}