H5W3
当前位置:H5W3 > 其他技术问题 > 正文

el-dialog 弹窗获取里面子组件

视频弹窗,如果放在外层就正常可以调用,

clipboard.png

clipboard.png

但是如果加一层el-dialog 那么就获取不到这个id,回调函数里面输出的$ref里面有东西

clipboard.png

但是this.$ref.myPlayer1 返回undefined.

<el-dialog title=”视频” v-model=”playFormVisible” :close-on-click-modal=”false” @open=’show()’>

        <video id="myPlayer1" poster="" controls playsInline webkit-playsinline autoplay ref="myPlayer1">
            <source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b" type="rtmp/flv" />
            <source src="http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8" type="application/x-mpegURL" />
        </video>
    </el-dialog>

如果想让这个也正常,应该怎么写,或者怎么获取?

回答:

video 其实是装在 el-dialogslot 中的,页面进来的时候,dialog 尚未挂载,当然拿到不 video 元素了。

应该在 dialog 挂载后再获取 video 元素。

show () {
   this.playFormVisible = true
   this.$nextTick(() => console.log(this.$refs.myPlayer1))

}

关于 nextTick,可以看看文档: https://cn.vuejs.org/v2/api/

回答:

v-model是什么鬼,换成:visible.sync照官网的来,
然后在mounted里面取$ref试试

本文地址:H5W3 » el-dialog 弹窗获取里面子组件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址