vue实现全屏screenfull-封装组件

  1. 安装依赖

npm install --save screenfull

  1. 引用

import screenfull from "screenfull"

3.封装fullScreen/index:

javascript 复制代码
<template>
  <div>
    <el-tooltip v-if="!content" effect="dark" :content="fullscreenTips" placement="bottom">
      <i class="el-icon-full-screen" @click="handleFullscreenClick"></i>
    </el-tooltip>
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  props: {
    element: {
      type: String,
      default: 'html'
    },
    openTips: {
      type: String,
      default: 'Fullscreen'
    },
    exitTips: {
      type: String,
      default: 'Exit Fullscreen'
    },
    content: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isFullscreen: false
    };
  },
  computed: {
    fullscreenTips() {
      return this.isFullscreen ? this.exitTips : this.openTips;
    },
  },
  methods: {
    handleFullscreenClick() {
      const dom = document.querySelector(this.element) || undefined;
      if (screenfull.enabled) {
        screenfull.toggle(dom);
        this.isFullscreen = screenfull.isFullscreen;
      }
    },
    handleFullscreenChange() {
      this.isFullscreen = screenfull.isFullscreen;
      // Clear all classes when exiting fullscreen
      if (!this.isFullscreen) {
        document.body.className = '';
      }
    },
    handleKeyDown(event) {
      // 检查是否按下了 ESC 键
      if (event.key === 'Escape' && screenfull.isFullscreen) {
        this.$message.warning('按 ESC 键可以退出全屏模式');
      }
    }
  },
  mounted() {
    if (screenfull.enabled) {
      screenfull.on('change', this.handleFullscreenChange);
      document.addEventListener('keydown', this.handleKeyDown);
    }
  },
  beforeDestroy() {
    if (screenfull.enabled) {
      screenfull.off('change', this.handleFullscreenChange);
      document.removeEventListener('keydown', this.handleKeyDown);
    }
  }
};
</script>

4.vue页面使用

javascript 复制代码
<template>
  <div class="warpper" style="" id="digital-screen">
    <div class="chartTitle">
      <div class="logo"> 2024年6月17日 </div>
      <div class="name"> 易恒智能模糊测试系统数据监控 </div>
      <div class="time">
        <Screenfull class="right-menu-item" :element="'#digital-screen'"/>
      </div>
    </div>
</div>

全屏的按钮根据实际需求更换!

very easy!!!

相关推荐
一颗松鼠3 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds23 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果42 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长1 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js