全屏功能是常见的功能,下面我们一起来封装一个全屏组件,当后续碰到全屏需求,直接cv就能愉快地学习(摸鱼)。
首先技术栈选用vue,然后下载screenfull依赖库帮助我们快速实现全屏功能,总的来说就是对scrennfull的封装。
// 安装 yarn add screenfull -S // 引入 import screenfull from 'screenfull'常用的属性方法如下:
<!-- 堆代码 duidaima.com --> <template> <div> <el-icon :class="isFullStatus ? 'CloseBold' : 'el-icon-full-scree'" @click="handleScreenFull" ></el-icon> </div> </template> <script setup lang="ts"> import screenfull from 'screenfull'; import { onMounted, ref } from 'vue'; import { ElMessage } from 'element-plus'; let isFullStatus = ref(false); const handleScreenFull = () => { if (!screenfull.isEnabled) { ElMessage.warning('该浏览器不支持全屏操作'); return; } screenfull.toggle(); isFullStatus.value = !isFullStatus.value; }; </script>总结