vue3 指定元素全屏 screenfull(可直接粘贴使用)
业务需求
由于输入的文字较多，需要将输入框进行全屏展示，方便输入和查看！
效果图
实现方式
- 下载插件"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>