vue使用screenfull模拟F11实现全屏和退出全屏

①：下载组件js

npm install --save screenfull

•  

②：在需要用到得页面引入和使用

引入

import screenfull from "screenfull";

• 1

使用：直接调用方法，会自动判断是否是全屏

screenfull.toggle();

• 1

  完整代码，使用组件是Ant Design of Vue

  <template>
              <!--是否全屏-->
              <a-icon :type="isFullscreen?'fullscreen-exit':'fullscreen'" class="trigger" @click="fullscreen"/>
  </template>
  
  <script>
      //引入js
      import screenfull from "screenfull";
  
      export default {
          name: 'GlobalHeader',
          data() {
              return {
                  isFullscreen: false
              }
          },
          methods: {
              fullscreen() {
                  this.isFullscreen = !this.isFullscreen
                  screenfull.toggle();
              }
          }
      }
  </script>
  
  <style lang="less" scoped>
      .trigger {
          font-size: 20px;
          line-height: 64px;
          padding: 0 0 0 12px;
          cursor: pointer;
          transition: color .3s;
      }
  </style>