问题遇到的现象和发生背景
driver.js的dom 的数据不显示出来,我没找出来是啥问题
代码:
this.$nextTick(()=>{
var arr3 = [];
debugger
// console.log(this.dialogFormBussiness.dataContent.expansionAttribute.drawevenArr[0]);
let dom1 = document.querySelector('#'+ this.dialogFormBussiness.dataContent.expansionAttribute.drawevenArr[0].controlDynamicCode)
const driver = new Driver({
allowClose: false,
highlight:dom1,
})
this.dialogFormBussiness.dataContent.expansionAttribute.drawevenArr.forEach((element,i)=>{
if(element.controlDynamicCode){
let dom = document.querySelector('#' + element.controlDynamicCode)
debugger
const stepDefinition1 = {
// 高亮元素
element: '#' + element.controlDynamicCode,
// 高亮显示的元素的背景色
stageBackground: '#ffffff',
popover: {
className: element.controlDynamicCode,
title: element.expansionAttribute.guideTitle,
description: element.expansionAttribute.guideRemark,
// 是否显示控制按钮,默认为 true [ ture显示/false隐藏 ]
showButtons: true,
allowClose: true,
doneBtnText: '完成向导',
closeBtnText: '我知道了',
nextBtnText: i == 0 ? '下一个节点' : element.expansionAttribute.guideTitle == this.dialogFormBussiness.dataContent.expansionAttribute.drawevenArr[i-1].expansionAttribute.guideTitle ? '下一步' : '下一个节点',
prevBtnText: i == 0 ? '上一步' : element.expansionAttribute.guideTitle == this.dialogFormBussiness.dataContent.expansionAttribute.drawevenArr[i-1].expansionAttribute.guideTitle ? '上一个节点' : '上一步',
/**弹窗显示的位置
* left, left-center, left-bottom,
* top, top-center, top-right,
* right, right-center, right-bottom,
* bottom, bottom-center, bottom-right,
* mid-center
*/
position: 'top',
},
// 从当前步骤移动到下一步时调用
onNext: () => {},
// 从当前步骤移动到上一步时调用
onPrevious: () => {},
}
// driver.highlight(dom)
// 设置分步指南
arr3.push(stepDefinition1);
// driver.highlight(stepDefinition1)
}
})
setTimeout(()=>{
driver.defineSteps(arr3)
driver.start();
const activeElement = driver.getHighlightedElement();
console.log(activeElement);
},100)
})
结果看图: