小白灿灿子 2022-07-20 16:20 采纳率: 72%
浏览 135
已结题

driver.js的dom 的数据不显示出来

问题遇到的现象和发生背景

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

结果看图:

img

  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 7月28日
    • 创建了问题 7月20日

    悬赏问题

    • ¥15 两台交换机分别是trunk接口和access接口为何无法通信,通信过程是如何?
    • ¥15 C语言使用vscode编码错误
    • ¥15 用KSV5转成本时,如何不生成那笔中间凭证
    • ¥20 ensp怎么配置让PC1和PC2通讯上
    • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法
    • ¥15 dnat基础问题,本机发出,别人返回的包,不能命中
    • ¥15 请各位帮我看看是哪里出了问题
    • ¥15 vs2019的js智能提示
    • ¥15 关于#开发语言#的问题:FDTD建模问题图中代码没有报错,但是模型却变透明了
    • ¥15 uniapp的h5项目写一个抽奖动画