美文网首页
vue3 for遍历创建ref,并给每个ref设置全屏功能

vue3 for遍历创建ref,并给每个ref设置全屏功能

作者: Amy_yqh | 来源:发表于2024-10-21 15:11 被阅读0次
<div  class="w-[100%] relative"  :ref="el => (fullscreenDivs[index] = el)"> 
   <span><i class="iconfont icon-tuichuquanping text-[20px]"  @click="goFullscreen(fullscreenDivs[index])"></i></span>
</div>

  const fullscreenDivs = ref([]);
  const goFullscreen = (div) => {
    if (div.requestFullscreen) {
      div.requestFullscreen();
    }
  };

相关文章

  • Vue3 Ref 与 Reactive的区别

    Vue3 在组件中使用ref()或reactive()都可以创建响应式数据 Vue2 中操作 Vue3 ref r...

  • Vue3入门到精通-setup

    传送门 Vue3入门到精通 --ref 以及 ref相关函数[https://www.jianshu.com/p/...

  • vue开发中遇到的坑

    1.动态的创建ref,并通过该ref获取组件 正常的动态创建没有,关键在于获取,获取时一定要[0] !!!获取组件...

  • vue3 使用$ref

    vue3 使用 $ref ,不是那个$refs 这个当前还是实验性api 主要是解决ref修改值需要.value...

  • 如何使用React Refs

    如何在React中利用ref以及ref转发,回调ref和HOC React Ref是有用的功能,可作为从父组件中引...

  • vue3学习

    一、基础语法 1、双向数据绑定 vue2 vue3 2、ref, reactive ref:一般用在定义基本类型和...

  • vue3与react、 react hooks

    一、Vue3新特性:setup、ref、reactive、computed、watch、watchEffect函数...

  • Vue3之ref()理解

    准备转Vue3, 看文档和一些文章时,看到ref(), 结合最近在用的Proxy,得出的结论就是: ref()实际...

  • Vue3 watch监听 ref数组

    在Vue3中使用数组作为响应式数据,有两种方式,用ref包裹,或用reactivewatch监听 ref 定义的数...

  • vue中的ref在遍历中调用子组件方法报错

    vue中的ref在遍历中调用子组件方法报错,如下 是因为当 ref 和 v-for 一起使用的时候,得到的 ref...

网友评论

      本文标题:vue3 for遍历创建ref,并给每个ref设置全屏功能

      本文链接:https://www.haomeiwen.com/subject/stkldjtx.html