vue使用screenfull实现全屏模式

vue实现全屏模式可以通过第三方依赖screenfull完成效果。

实现效果：查看源码

首先需要安装第三方依赖

// npm 
npm install screenfull

//yarn
yarn add screenfull

// pnpm
pnpm install screenfull

代码实现：

<div class="flex-center w100 h100 font20 cursor-pointer" @click="handleClick">
	{{!isScreenfull?'显示全屏':"取消全屏"}}
</div>

<script setup>
	import {ref} from "vue";
	import screenfull from 'screenfull';

	const isScreenfull=ref(false);
	
	/* 点击 */
	const handleClick = () => {
		if (!screenfull.isEnabled) {
			ElMessage.warning('暂不不支持全屏');
			return false;
		}
		screenfull.toggle();
		isScreenfull.value=!isScreenfull.value
	}
</script>