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

news2024/9/21 5:34:22

业务需求

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

效果图

在这里插入图片描述

实现方式

下载插件"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-input
          id="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>