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

目录

1.效果举例：

         2.场景

3.实现步骤 

---

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()
    }
 
  },

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

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

<screenfull
      style="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 = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
 
  },
  watch: {
    $route (to, from) {
      if (to.name == 'Dashboard') {
        this.idBig = true
      } else {
        this.idBig = false
      }
    }
  },
 
 
 
}
</script>