uniapp结合vue3获取元素节点 - 获取不到的问题

最新推荐文章于 2024-07-10 14:31:13 发布

滿

最新推荐文章于 2024-07-10 14:31:13 发布

阅读量462

点赞数 6

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_42498594/article/details/140214113

版权

背景：需要在某个条件下通过.pause() 或者.play()方法;让视频暂停或者播放

template 部分代码，给video 设置了id 和 ref

 <view style="width: 100%; height: 240px" class="video">
      <video
        :paused="isPaused"
        ref="videoRef"
        :id="'video' + jumpNum"
        :src="videoUrl"
        controls
        class="videoStyle"
        width="100%"
        height="240px"
        :autoplay="isAutoplay"
        :initial-time="preVideoTime"
        :show-center-play-btn="false"
        @play="handlePlay"
        @pause="onPause"
        @ended="onEnd"
        @timeupdate="onTimeUpdate"
      ></video>
      <div v-if="videoLearnStatus <= '1'" class="cover"></div>
    </view>

像平时vue2、vue3获取节点可以直接使用内置ref，或者原生js document.getElementById来获取，在模版中给元素添加ref,在vue2是用this.$ref，变量名称就获取到了，vue3是没有了this，只能先声明变量利于 const videoRef= ref(null) ，获取在页面挂载后，value就能获取，但是我在小程序死活都拿到的null，后来发现拿不到，是跟环境有关系，由于小程序环境的限制，不能直接在setup函数内部使用ref来获取DOM元素，因为小程序的视图层是由小程序框架管理的，而不是浏览器的DOM。

解决办法：

先引入页面实例，再使用小程序提供的api进行获取，这样就能拿到关于dom节点的大小信息了

const videoRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
  videoRef.value = uni.createVideoContext('video' + jumpNum.value, instance);
});
//这时候就能取到videoRef.value  的值
//然后通过videoRef.value.play()或者videoRef.value.pause() 实现video 的播放与暂停

这时候就能取到videoRef.value 的值
然后通过videoRef.value.play()或者videoRef.value.pause() 实现video 的播放与暂停。