当前位置：首页 > news >正文

vue3 指定元素全屏 screenfull(可直接粘贴使用)

news 2025/6/23 2:01:10

业务需求

由于输入的文字较多，需要将输入框进行全屏展示，方便输入和查看！

效果图

在这里插入图片描述

实现方式

下载插件"screenfull": “^6.0.2” yarn add screenfull -S
项目中使用 import screenfull from "screenfull"
templte中代码

<div ref="textareaRef" class="screenFull"><el-icon class="screen_icon" @click.stop.prevent="handleScreen"><FullScreen /></el-icon><el-inputid="inputElement"v-model="noteData.noteText":rows="rowSize"maxlength="5000":autofocus="true"type="textarea"placeholder="有什么手记想分享给大家？"/></div>

javascript代码

import { ref } from "vue";const textareaRef = ref(null);
const rowSize = ref("3");// 点击esc和x号退出全屏
const handleResize = () => {// 写法一 start // document.webkitIsFullScreen  用来判断是否按了ESC和X号取消全屏 (webkitIsFullScreen有兼容性问题)if (!document.webkitIsFullScreen) {screenfull.exit();rowSize.value = "3";textareaRef.value.style.width = "100%";textareaRef.value.style.height = "";}// 写法一 end// 写法二 start  推荐if (!screenfull.isFullscreen) {screenfull.exit();rowSize.value = "3";if (textareaRef.value) {textareaRef.value.style.width = "100%";textareaRef.value.style.height = "";}}// 写法二 start
};// 全屏
const handleScreen = () => {if (screenfull.isEnabled) {screenfull.toggle(textareaRef.value);rowSize.value = Math.floor(window.innerHeight / 17).toString(); // 该属性不能完成保证高度为多少行textareaRef.value.style.width = "100%";textareaRef.value.style.height = "100vh";textareaRef.value.style.backgroundColor = "#ffffff";window.onresize = handleResize;}
};

style代码

<style lang="scss" scoped>
.screenFull {position: relative;
}.screen_icon {position: absolute;top: 10px;right: 6px;z-index: 10;cursor: pointer;font-size: 15px;
}
</style>