自定义蒙层指引
安装
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>