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

vue实现全屏screenfull-封装组件

1. 安装依赖

npm install --save screenfull

2. 引用

import screenfull from "screenfull"

3.封装fullScreen/index:

<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 fullscreenif (!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页面使用

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

http://www.lryc.cn/news/376917.html

相关文章:

  • 【LinkedList与链表】
  • 为数据安全护航,袋鼠云在数据分类分级上的探索实践
  • Spring 循环依赖详解
  • 项目经理真的不能太“拧巴”
  • 企业如何选择合适的CRM工具?除Salesforce之外的10大主流选择
  • 每年1-1.2万人毕业,男女比例约3:1,测绘工程的就业率如何
  • JimuReport 积木报表 v1.7.6 版本发布,免费的低代码报表
  • “灵活就业者“超两亿人 游戏开发者如何破局?
  • MySQL事务与存储引擎
  • 总是给数据库表字段设置默认值的好处
  • 11.2 Go 常用包介绍
  • Sqlite3数据库基本使用
  • 实现贪吃蛇小游戏【简单版】
  • uniapp实现内嵌其他网页的功能
  • 【Ruby简单脚本01】查看wifi密码
  • VSG/VSA 矢量信号模拟/分析软件
  • C++使用GDAL库完成tiff图像的合并
  • 深入理解AQS:Java并发编程中的核心组件
  • 集合进阶:List集合
  • el-table表头修改文字或者背景颜色,通过header-row-style设置样式
  • web前端-CSS
  • u8g2 使用IIC驱动uc1617 lcd 字符显示只显示上半部分,不显示下半部
  • 单片机第五季-第八课:STM32CubeMx和FreeRTOS
  • 【Linux】进程控制1——进程创建和进程终止
  • 计算机图形学入门16:曲线
  • 【Ruby基础01】windows和termux中搭建Ruby开发环境
  • 2406c++,iguana动态反射
  • 干货分享——AB站帮你解决独立站收款难题
  • C++继承与派生
  • Survival Animations