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!!!

相关推荐
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
天天进步20155 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html