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=`<div class="newImage-${popover.className}"></div>`
           
         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;
}

<template>
    <div id="guide">
        <div class="top"></div>
        <div class="main">
            <div class="left">
                <div class="one">
                    <button class="left-top">第二部</button>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                </div>
                <div>wwww</div>
                <div>wwww</div>
                <div>wwww</div>
                <div>wwww</div>
                <div>wwww</div>
            </div>
            <div class="right"></div>
        </div>
        <div class="bottom">
            <div>dddd</div>
            <div>dddd</div>
            <div>dddd</div>
            <button class="right-bottom">第一步</button>
            <div>dddd</div>
            <div>dddd</div>
        </div>
        
     </div>
</template>

<script>
import guide from '../utils/guide.js'
export default {
mounted() {
    this.$driver.defineSteps(guide)
    this.$driver.start()
},
}
</script>

<style  scoped>
.top{
    width: 100%;
    height: 60px;
    background: #ddd;
    margin-bottom: 20px;
}
.main{
        width: 100%;
    height: 800px;
        display: flex;
        justify-content: space-between;

}
        .left{
            width: 500px;
            height: 500px;
        }
        .right{
            width: 900px;
            height: 500px;
            background: #ddccaa;
        }

</style>