vue中实现全屏功能

安装全屏插件

npm i screenfull --save

页面引入

import screenfull from 'screenfull';

html

<template>
  <div class="hello">
    <div class="full-screen" @click="fullScreen()">{{ fullscreen ? '全屏' : '取消全屏' }}</div>
    <div id="data-screen" @click="fullScreenB()">
      <span style="color: red">我是部分全屏</span>
    </div>
  </div>
</template>

<script>
import screenfull from 'screenfull';
export default {
  name: 'HelloWorld',
  data() {
    return {
      // 控制全屏
      fullscreen: true
    };
  },
  methods: {
    // 点击全屏展示
    fullScreen() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        });
        return false;
      }
      screenfull.toggle();
      this.fullscreen = screenfull.isFullscreen;
    },
    // 点击部分全屏展示
    fullScreenB() {
      const bodyEle = document.getElementById('data-screen');
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        });
        return false;
      }
      screenfull.toggle(bodyEle);
    }
  }
};
</script>