vue项目做新人引导 使用的driver插件 点击下一步出现了空白块
const steps = [
{
element: '#component-item',
popover: {
className: 'first-step-popover-class',
title: '添加组件',
description: '双击或拖拽组件可以将其添加到编辑区域哦',
position: 'right'
}
},
{
element: '#card-list-0',
popover: {
title: '编辑区',
description: '当前区域为组件展示区域,点击组件“数据编辑”可以配置组件数据',
position: 'right'
}
},
{
element: '#floorNav',
popover: {
title: '导航楼层',
description: '当前为导航楼层,可以查看当前页面的组件列表,可以快速操作排序',
position: 'left'
}
}]
addDriver() { // 添加引导
// window.localStorage.setItem('showDriver', true)
let showDriver = window.localStorage.getItem('showDriver')
if(showDriver == null) {
this.driver = new Driver({
className: 'scoped-class',
animate: true,
opacity: 0.75,
padding: 10,
allowClose: false,
overlayClickNext: false,
doneBtnText: '我知道了',
closeBtnText: '我知道了',
nextBtnText: '下一步',
prevBtnText: '上一步',
onDeselected: Element => {
window.localStorage.setItem('showDriver', false)
if(Element.options.element == '#component-item') {
// 增加遮罩
var bodyEle = document.body
var appendDiv = document.createElement('div')
appendDiv.setAttribute('class', 'driver-page-overlay')
bodyEle.appendChild(appendDiv)
}
if(Element.options.element == '#card-list-0') {
document.querySelector('#floorNav').style.display = 'block'
}
if(Element.options.element == '#floorNav') {
var attrDiv = document.querySelector('.driver-page-overlay')
if(attrDiv) {
document.querySelector('.driver-page-overlay').removeAttribute('class')
}
}
}
})
this.$nextTick(() => {
this.driver.defineSteps(steps)
this.driver.start()
})
} else {
document.querySelector('#floorNav').style.display = 'block'
// return false
}
您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~
ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632
非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!
速戳参与调研>>>https://t.csdnimg.cn/Kf0y
你好,请问解决了吗?我遇到了同样的问题,是dialog和drawer里面的引导有空白区域。
界面是什么样子?