Vue项目中稳健的获取dom元素

迈不过友情╰ 2023-06-05 12:52 11阅读 0赞

## 1、获取Element的弹框中的Dom元素 ##

**由于弹框由v-if控制，在初始页面渲染的时候，并不存在该Dom元素，所以在mounted中，获取不到该弹框的Dom元素，无法添加原生时间，如下拉加载**
    	下面提供稳健的获取弹框Dom元素的方法，
    	首先，由于弹框是由v-if判断，则可以在watch中监听v-if所对应的变量，在为true时，则弹框打开，此时去获取DOM元素，发现仍然获取不到。。。。
    	此时，需要将获取事件转为异步执行，即写在setTimeout中，即可。稳健一些，可以在nextTck中写出。
    	
    	（仍旧会存在问题）
    	 若在Element提供的弹框回调中（弹框打开动画结束），则可以保证取到

<el-dialog :visible.sync="dialogVisible" ref="dialog" @opened="dialogOpened" >

dialogOpened() { 
          this.$nextTick(() => { 
            setTimeout(() => { 
              let scrollContent = document.getElementById("scrollContent");
              if (scrollContent) { 
                scrollContent.addEventListener("scroll", this.onScroll);
                console.log("获取到滚动节点----");
              } else { 
                console.log("未获取到滚动节点====");
              }
            });
          });
        }

## 2、如果以上方法均无法解决 ##

因为可能数据是异步获取而后填入DOM中，则可以在更新函数中进行获取DOM的操作，但此时，需要加很多限制，因为无法限制由谁引起的更新！需要标志位减少获取次数。

**可以通过在watch监听函数中，进行标志位的更改。**

有此想法的前提，是在给element UI 弹框中，嵌套了标签页 ，在每次切换标签页的过程中，DOM都会销毁，所以对DOM获取时机的把握比较关键，而根据标签页中的数据是否渲染完毕后，去获取改DOM容器，可以说是相当稳健。

## 无法获取Element弹窗内嵌套的组件问题 ##

**问题：当在el-dialog内嵌套组件时，若el-dialog没有打开，则获取不到其内部嵌套的内容，ref也不可以**

**解决方法：在翻阅Element 隐藏滚动条部分的源码时，发现其获取dom元素的方法是通过computed来获取**

经过验证，可以在弹框打开的回调里面，利用计算属性进行获取

<el-dialog ref="dialog" @opened="dialogOpened">
    		<div ref="innerContent"></div>
    	</el-dialog>

computed:{ 
    	getInnerDom(){ 
    		//此时之只能获取到dialog
    		console.log(this.$refs)
    		return this.$refs.innerContent
    	}
    }
    methods:{ 
    	dialogOpened(){ 
    		//此时可以获取到内容节点
    		console.log(this.getInnerDom)
    	}
    }

**总结**  
*计算属性*，由于存在缓存，只有在对应依赖变化的时候才会变化，而DOM元素只有存在和不存在两种状态，

所以，在Dialog没有打开的时候，其对应依赖项为空，而当依赖项发生变化时，也即*this.$refs.innerContent*存在了，getInnerDom才进行改变。比在upDated里面获取要方便很多

重点：不清楚在DOM元素高度或者颜色等发生变化后，会不会触发computed