使用driver插件 点击下一步出现空白区域

Question

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
      }

Answer 1

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632