超好用的前端全屏插件：vue-fullscreen

官网：vue-fullscreen

安装

npm install vue-fullscreen

引入

import VueFullscreen from ‘vue-fullscreen’
Vue.use(VueFullscreen)

使用

<template>
  <fullscreen
    :page-only="true"
    v-model="fullscreen"
    :exit-on-click-wrapper="false"
    fullscreen-class="big-view bg-white"
  >
    <div>content</div>
    <button type="button" @click="toggle">{{ fullscreen?"退出":"进入" }}全屏</button>
  </fullscreen>
</template>

<script>
/**
 * @author        全易
 * @time          2022-01-14 10:52:32  星期五
 * @description   数据大屏
 **/

export default {
  data() {
    return {
      fullscreen: false,
    }
  },
  methods: {
    toggle() {
      this.fullscreen = !this.fullscreen
    },
  },
}
</script>

<style lang="less" scoped>
.big-view {
  z-index: 99;
}
</style>