«

vue异步加载dom元素之后无法获得如何解决

时间:2024-7-23 09:42     作者:韩俊     分类: Javascript


这篇文章主要介绍“vue异步加载dom元素之后无法获得如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue异步加载dom元素之后无法获得如何解决”文章能帮助大家解决问题。

    vue异步加载dom元素后无法获得

    vue存在大量的异步加载问题,比如动态创建dom元素,若你紧接着去获取创建的dom元素是获取不到的。

    解决办法

    第一种办法比较low,使用setTimeout方法,让获取dom的代码在动态创建元素之后一段时间(这个时间非常的短)去执行。但这种方法应该是存在风险的,不推荐。

    第二种办法 在将要执行的代码上套一层 this.$nextTick()

    例如:

    this.$nextTick(function() {
            let grids = _that.$refs.datamessage;
            console.log(grids);
            for (let i = 0; i < grids.length; i++) {
              let xb = grids[i].getAttribute("index");
              //alert(xb);
              if (_that.value.indexOf(xb) != -1) {
                grids[i].setAttribute("ifSelect", "true");
                grids[i].style.backgroundColor = "#b3d8ff";
                grids[i].style.color = "#409eff";
              }
            }
          });

    vue稳健的获取dom元素

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

    标签: javascript vue

    热门推荐