1.效果举例：

点击tab栏进入全屏

按esc或者屏幕中间图标退出全屏，通过返回按钮返回项目

2.场景

相当于手动按F11的效果。经典的应用场景是制作可视化大屏或者全屏展示类的页面。因为现在写的是vue项目，所以稍后以vue为例子。

3.实现步骤

第一步，下载插件

npm install screenfull  save

第二步，在你需要使用的页面中引入

//引入全屏插件
import screenfull from "screenfull";

第三步，复制下面的函数

  methods: {//全屏方法isScreenFull () {if (!screenfull.isEnabled) {// 如果不支持进入全屏，发出不支持提示this.$message({message: "您的浏览器版本过低不支持全屏显示！",type: "warning"})return false}screenfull.toggle()}},

第四步，页面的结构里面找个位置粘贴以下代码

注意一个点，样式设置为绝对定位之类的，意思是别让他占位置影响布局。

<screenfullstyle="position: absolute; left: 0px; top: 0px; z-index: 9999999"id="screenfull"@click="isScreenFull">
<el-button style="display: none">全屏</el-button></screenfull >

第五步，生命周期中调用，达到一进入就自动全屏

 created () {this.$nextTick(() => {this.isScreenFull() //以下两种方式二选一，均可// setTimeout(() => {//   document.querySelector("#screenfull").click()// })})},

至此，结束。

附上一个设置返回功能的写法，以供参考

<template><div><div id="app" v-if="!idBig">    <router-view v-if="isRouterAlive" /></div><div v-if="idBig"><el-button @click="$router.go(-1) || $router.push('/employees')">返回</el-button><BigPing></BigPing></div></div>
</template><script>export default {name: 'App',provide () {return {reload: this.reload}},data () {return {idBig: false,isRouterAlive: true}},created () {},methods: {reload () {this.isRouterAlive = falsethis.$nextTick(function () {this.isRouterAlive = true})},},watch: {$route (to, from) {if (to.name == 'Dashboard') {this.idBig = true} else {this.idBig = false}}},}
</script>

前端可视化大屏设置全屏模式方法相关推荐

大数据前端可视化大屏--前端开发之路
从2016年开始接触可视化方向,一直想写一篇文章回顾一下这几年踩过的坑,接下来的这段时间里我会不定时的给大家分享一些可视化方面的经验和感悟,发出来跟大家一块分享一下.一起讨论讨论.共同学习进步. 前言 ...
纯前端可视化大屏-免费分享（内含百度网盘链接）
这是我Web课程设计中的一个界面--大屏展示,采用Echarts技术和纯前端来实现的. ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库, ...
可视化大屏的几种适配方案
对于可视化大屏项目而言,我们主要需要考虑下面两个问题: 首先是div元素的适配,需要保持每个div元素在不同分辨率的屏幕下依然会显示正常的比例,不会因为不同分辨率的屏幕而变得拉伸变形: 第二个要考虑的 ...
手把手教你如何制作可视化大屏！
在我们生活和工作中,经常会看到可视化大屏,主要用于展示一些汇总信息,那如何制作一个酷炫的可视化大屏呢? 今天带大家看个github上的案例. 项目地址:https://github.com/yyhso ...
数据可视化大屏酷炫秘籍之前端开发者自己动手
数据可视化大屏酷炫秘籍之前端开发者自己动手数据可视化大屏的酷炫效果相信大家都已经见识到了经常是这样的: 或者是这样的又或者是这样的如此酷炫的大屏效果,要想完全复原首先离不开以下步骤: 设计师精确 ...
不用写代码的可视化大屏，一口气把工具和方法都教给你
前段时间公司的领导偶尔看了阿里.天猫的大屏,也非要吵着要做可视化大屏,但是我们公司没有阿里天猫那样的技术基础和资金支撑,这可让我们IT部门苦恼了相当长时间. 于是IT的老大直接甩给了我们来做,其实之前 ...
0基础怎么做可视化大屏？2种可以节省95%时间的方法教给你
如今的可视化大屏已结束快速发展的阶段,逐步趋于稳定.但对于零基础的小白来说,做可视化大屏这件事,本身还是会存在着一定的困难. 比如说,不知道怎么连接数据库,连接完后一旦数据口径发生明显的改变,或是数据 ...
前端笔记：可视化大屏
数据可视化,可以让我们的眼睛对数据有一个更加直观的感知.而可视化大屏,更会给人带来一种高大上的.酷炫的.有科技感的感觉.尤其是在科技行业.投资行业.上市企业,可视化大屏用得比较多.下图是我制作的一份可 ...
前端大屏职业专业智慧分析大数据可视化大屏html模板源码
可视化大屏模板案例在线演示地址 http://yuanbaoshuju.com/ 页面部分代码 <!DOCTYPE html> <html lang="zh-CN ...

前端可视化大屏设置全屏模式方法

1.效果举例：

2.场景

3.实现步骤

前端可视化大屏设置全屏模式方法相关推荐

最新文章

热门文章