记vue分步引导的坑 driver.js 与 vue-tour html2canvas 与 dom-to-image

1、由于项目需要加入用户指引，于是我就找了下相关的插件。一开始使用driver.js做了个demo感觉还是不错的，于是就准备使用driver.js，修改下样式就行了。

2、但是真正用设计图来设置时却发现了问题，由于项目是用vue编写的，根据设计图拆分了很多可复用的组件。设计图中很多需要高亮的dom节点都是在好几个组件之下的，driver.js获取不到，而且部分dom高亮时只有一个白色的框框覆盖。

cnpm i driver.js -S

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
export default {
   
	props: {
   
	    guideVisible: {
   
	        type: Boolean,
            default: false
        },
	},
    data() {
   
	    return {
   
			driver: null, // 指引实例
            searchDataStep: [
	            {
   
	                element: '#step-searchData',       
                    popover: {
                       
	                   className: 'only-one-line', // 弹窗样式
                       title: '无', // 弹窗标题不能为空，否则弹窗不显示。display隐藏吧。
                       position: 'left', // left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom, bottom, bottom-center, bottom-right, mid-center
                       description: '点击数据查询' // 弹窗内容
					},
					onNext: (e) => {
   
                            console.log('转到第二步前要执行的操作')
                    },
				},
	             {
   
		             element: '#step-searchParams',  // 嵌套组件深处，获取不到
	                 popover: {
                       
	                 className: 'multiple-lines',
	                 title: '查询条件',
	                 position: 'left',
	                 description: '选择对应数据的搜索条件，进行搜索。'
	              }
			]
		}
	},
    mounted(){
   
		this.driver = new Driver({
   
	        prevBtnText: "上一步",
            nextBtnText: "下一步",
            doneBtnText: "完成",
            closeBtnText: "关闭",
            allowClose: false,
            animate: true,  // 动画
            opacity: 0.5,  // 遮罩层不透明度（0表示仅弹出且不覆盖）
            padding: 10,    // 边距
            keyboardControl: false, // 禁止键盘操作
            onHighlightStarted: (e) => {
   
	            // 样式
                let timer = setTimeout(()=>{
    // this.$nextTick 无效
	                let el = document.querySelector('#driver-popover-item')
                    if(el && el.style.display != 'none'){
   
	                    el.style.display = 'flex' // 便于整合样式
                        let footerEl = document.getElementsByClassName('driver-popover-footer')[0]
                        footerEl.style.display = 'inline-block' // 底部控制按钮为行内元素
                        let prevEl = document.getElementsByClassName('driver-prev-btn')[0]
                        prevEl.style.display = 'none'  // 隐藏上一步按钮
					}
                    clearTimeout(timer)
                },100)
			}, // 在元素即将突出显示时调用
		});
	},
    methods: {
   
		// 点击操作指引
        guideClick(){
   
	        this.driver.defineSteps(this.searchDataStep);
            this.driver.start();
        },
    }
}

// css弹窗样式修改
/* driver.js */
#driver-popover-item
  &.only-one-line
    display flex!important
    align-items center
    justify-content space-between
    .driver-popover-title
      display none!important
    .driver-popover-description
      display inline-block!important
    .driver-popover-footer 
      display inline-block!important
      margin-top 0
    &.multiple-lines
      .driver-popover-title
        font-size .14rem
      .driver-popover-footer 
        margin-top .2rem
  /* 统一取消关闭按钮 及 关闭按钮样式 */
  .driver-popover-description
    font-size .14rem
  .driver-popover-footer 
      .driver-close-btn
        display none!important
      .driver-btn-group, .driver-close-only-btn
        display flex!important
        button
          width 1rem
          height .3rem
          color #137CFD
          padding 0
          border .02rem solid #137CFD
          font-size .14rem
          background-color #ffffff
          border-radius .04rem