vue3动态获取Dom节点并利用screenfull指定元素全屏

动态获取Dom

在vue中很多节点是for循环出来的，那该怎么获取动态节点呢？

js部分

//首先导入ref
import {ref} from "vue";

//声明一个集合,用来存放节点
const live = reactive([]);

//获取dom节点的方法
const getItemRef = (el) => {
	if (el) {
	   live.push(el);
	}
};

html部分

//在节点上绑定该方法
<div :ref="getItemRef">

此时动态节点就获取成功了

利用screenfull全屏

安装

npm install screenfull --save

使用方法

先引入

import screenfull from "screenfull"; //引入全屏组件

属性

screenfull.isFullscreen; // 布尔值  当前页面是否全屏 
screenfull.isEnabled; // 布尔值  当前浏览器是否支持全屏

方法

screenfull.request(); // 全屏 
screenfull.exit(); // 退出全屏 
screenfull.toggle(); // 全屏切换

整页全屏

<button @click="fullScreen"></button>


fullScreen() { 
  if (screenfull.isEnabled && !screenfull.isFullscreen){ 
    screenfull.request(); 
  }
},

退出全屏

exitFullScreen() { 
  if (screenfull.isEnabled && screenfull.isFullscreen) { 
    screenfull.exit(); 
  } 
},

全屏切换

toggleFullScreen() { 
  if (screenfull.isEnabled) {
    screenfull.toggle();
  } 
},

指定元素全屏

//全屏
	const toggleFullScreen = (index) => { //传入当前点击的索引
		//判断当前浏览器是否支持全屏&当前页面是否全屏
		if (screenfull.isEnabled && !screenfull.isFullscreen) {
			screenfull.request(live[index]);//选取动态获取的节点
		}
	};
        
        
// esc退出全屏（Chrome浏览器默认esc退出全屏）
	const escEvent = (e) => {
		if (e.code === "Escape" && screenfull.isFullscreen) {
			screenfull.exit();
		}
	};