[JavaScript知识库]Vue F11监听切大屏

用Datav插件做大屏可视化时，有一个全屏需求，我的想法是监听F11键，然后触发浏览器的大屏功能API。百度一下，竟有插件，大喜。插件的好处大家都知道，时间熬出来的，并且BUG极少，代码精简，做了全浏览器兼容。

步骤

1.插件

npm install --save screenfull

2.引入(可全局，也可需要的文件中引入)

import screenfull from 'screenfull'

3.datav的全屏(这个全屏是做了页面级的全屏处理，如不是单页布局不结合这个用会有问题)

  <dv-full-screen-container style="background-color: rgb(11, 8, 53);">
</dv-full-screen-container>

4.html的放大按钮

 <el-button
                          style="font-size:20px;"
                          type="text"
                          size="mini"
                          icon="el-icon-full-screen"
                          @click="clickFullscreen()"
                        ></el-button>

5.全屏插件结合datav的全屏js代码

 data() {
    return {
      show_big: false,
      fullscreen:false

    }
  },
  computed: {
  },
  watch: {
    fullscreen(newvalue, oldvalue) {
      if (newvalue != oldvalue) {
        // 进行退出全屏的后的事件
        console.log('退出全屏')
      }
    }
  },
  mounted() {
    const that = this
    window.addEventListener('keydown', this.KeyDown, true)
    window.onresize = () => {
      // 调用判断全屏的方法，用来监听
      that.checkFull()
    }
  },
  created() {
  },
  beforeDestroy() {
  },
  methods: {

    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false
        this.clickFullscreen() // 触发全屏的按钮
      }
    },

    clickFullscreen() {
      screenfull.toggle()	// 全屏状态切换
      this.fullscreen = !this.fullscreen
      this.show_big = !this.show_big
    },
    checkFull() {
      const fullscreen = window.fullScreen || document.webkitIsFullScreen
      this.fullscreen = fullscreen
      return fullscreen
    }
  }

大功就告成了

================================如果遇到问题==========================

vue screenfull全屏插件 安装之后 npm run serve报错
 Module parse failed: Unexpected token (55:42) You may need a

解决办法，用低版本插件，执行如下

npm install --save-dev screenfull@5.1.0

想看我的全部代码，贴上

<template>
  <div class="big-screen-container" @dblclick="clickFullscreen()">
    <div v-if="show_big">
      <dv-full-screen-container style="background-color: rgb(11, 8, 53);">
        <dv-border-box-11
          :title="$t('programModel.faceTempMonitor')"
          style="height:800px;width:100%;padding-top:60px;padding-left:22px;"
          background-color="transparent">
          <!-- <div style="text-align:right;margin-right:10px">
          <el-button
            style="font-size:15px;"
            type="text"
            size="mini"
            icon="el-icon-full-screen"
            @click="showBig()"
          ></el-button>
        </div> -->
          <el-row>
            <el-col :span="8">
              <el-row>
                <el-col>
                  <div style="margin-top:10px;">
                    <man-card :bean="bean"></man-card>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <div >
                    <acid-card :bean="bean"></acid-card>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <div >
                    <temp-card :bean="bean"></temp-card>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row style="margin:10px 10px 0px 10px;">
                <el-col>
                  <abnormal-card :bean="bean">
                  </abnormal-card>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <total-card :bean="bean">
                  </total-card>
                </el-col>
              </el-row>
              <el-row style="margin:0 10px 0 10px;">
                <el-col>
                  <device-card :bean="bean">
                  </device-card>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row style="margin:10px 25px 10px 0px ">
                <el-col>
                  <normal-img-card :bean="bean">
                  </normal-img-card>
                </el-col>
              </el-row>
              <el-row style="margin-right:25px">
                <el-col>
                  <abnormal-img-card :bean="bean">
                  </abnormal-img-card>
                </el-col>
              </el-row>
              <el-row style="margin-top:10px;margin-right:25px">
                <el-col>
                  <div class="img-abnormal-card" style="height:53px;width:100%;background-color:transparent;">
                    <dv-border-box-10 background-color="transparent" style="text-align:center;margin-right:20px">
                      <div style="display:flex;flex-dirction:row">
                        <div style="width:100%;line-height:50px;margin-right:20px;font-size:12px;color:#67C23A">
                          <span v-show="count >0">{{ count }}{{ $t('screenbig.afterFresh') }}</span>
                        </div>
                        <div style="line-height:60px;margin-right:20px;font-size:12px;color:#67C23A">
                          <el-button
                            style="font-size:20px;"
                            type="text"
                            size="mini"
                            icon="el-icon-full-screen"
                            @click="clickFullscreen()"
                          ></el-button>
                        </div>
                      </div>
                    </dv-border-box-10>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </dv-border-box-11>
      </dv-full-screen-container>
    </div>
    <div v-else>

      <dv-border-box-11
        :title="$t('programModel.faceTempMonitor')"
        style="height:800px;width:100%;padding-top:60px;padding-left:22px;"
        background-color="transparent">
        <!-- <div style="text-align:right;margin-right:10px">
          <el-button
            style="font-size:15px;"
            type="text"
            size="mini"
            icon="el-icon-full-screen"
            @click="showBig()"
          ></el-button>
        </div> -->
        <el-row>
          <el-col :span="8">
            <el-row>
              <el-col>
                <div style="margin-top:10px;">
                  <man-card :bean="bean"></man-card>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div >
                  <acid-card :bean="bean"></acid-card>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div >
                  <temp-card :bean="bean"></temp-card>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row style="margin:10px 10px 0px 10px;">
              <el-col>
                <abnormal-card :bean="bean">
                </abnormal-card>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <total-card :bean="bean">
                </total-card>
              </el-col>
            </el-row>
            <el-row style="margin:0 10px 0 10px;">
              <el-col>
                <device-card :bean="bean">
                </device-card>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row style="margin:10px 25px 10px 0px ">
              <el-col>
                <normal-img-card :bean="bean">
                </normal-img-card>
              </el-col>
            </el-row>
            <el-row style="margin-right:25px">
              <el-col>
                <abnormal-img-card :bean="bean">
                </abnormal-img-card>
              </el-col>
            </el-row>
            <el-row style="margin-top:10px;margin-right:25px">
              <el-col>
                <div class="img-abnormal-card" style="height:53px;width:100%;background-color:transparent;">
                  <dv-border-box-10 background-color="transparent" style="text-align:center;margin-right:20px">
                    <div style="display:flex;flex-dirction:row">
                      <div style="width:100%;line-height:50px;margin-right:20px;font-size:12px;color:#67C23A">
                        <span v-show="count >0">{{ count }}{{ $t('screenbig.afterFresh') }}</span>
                      </div>
                      <div style="line-height:60px;margin-right:20px;font-size:12px;color:#67C23A">
                        <el-button
                          style="font-size:20px;"
                          type="text"
                          size="mini"
                          icon="el-icon-full-screen"
                          @click="clickFullscreen()"
                        ></el-button>
                      </div>
                    </div>
                  </dv-border-box-10>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </dv-border-box-11>
    </div>

  </div>
</template>

<script>
import screenfull from 'screenfull'
import {
  getAetMonitor
} from '@/api/user'
import manCard from './components/man-card'
import acidCard from './components/acid-card'
import tempCard from './components/temp-card'
import totalCard from './components/total-card'
import temperCard from './components/temper-card'
import deviceCard from './components/device-card'
import abnormalCard from './components/abnormal-card'
import abnormalImgCard from './components/abnormal-img-card'
import normalImgCard from './components/normal-img-card'
export default {
  name: 'Home',
  components: {
    manCard,
    normalImgCard,
    acidCard,
    temperCard,
    deviceCard,
    abnormalCard,
    abnormalImgCard,
    tempCard,
    totalCard
  },
  data() {
    return {
      show_big: false,
      bean: undefined,
      fullscreen:flase,
      timer: null,
      count: 10

    }
  },
  computed: {
  },
  watch: {
    fullscreen(newvalue, oldvalue) {
      if (newvalue != oldvalue) {
        // 进行退出全屏的后的事件
        console.log('退出全屏')
      }
    }
  },
  mounted() {
    const that = this
    window.addEventListener('keydown', this.KeyDown, true)
    window.onresize = () => {
      // 调用判断全屏的方法，用来监听
      that.checkFull()
    }
  },
  created() {
    clearInterval(this.timer)
    this.init()
    this.countDown(10)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    init() {
      getAetMonitor()
        .then(res => {
          this.bean = res.data
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    countDown(count) {
      this.count = count
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= count) {
          --this.count
        } else {
          this.count = 10
          this.init()
        }
      }, 1000)

      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer)
      })
    },
    showBig(bool) {

    },
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false
        this.clickFullscreen() // 触发全屏的按钮
      }
    },

    clickFullscreen() {
      screenfull.toggle()	// 全屏状态切换
      this.fullscreen = !this.fullscreen
      this.show_big = !this.show_big
    },
    checkFull() {
      const fullscreen = window.fullScreen || document.webkitIsFullScreen
      this.fullscreen = fullscreen
      return fullscreen
    }
  }

}
</script>

<style lang="scss" scoped>
.big-screen-container {
  margin:20px;
  height:800px;
  background-color: rgb(11, 8, 53);
  box-shadow: 0px 2px 5px rgba(18, 32, 231, 0.788);
}
</style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖