Vue 全屏显示效果实现

1、项目中使用的是sreenfull插件，执行命令安装
第一步：安装sreenfull插件：
在命令行中执行：（注：因为这是生产依赖，所以执行–save）当然你也可以在Vue的GUI的依赖选项中直接搜索screenfull来进行安装。

npm install screenfull  save

2、html代码

<el-tooltip content="全屏缩放" effect="dark" placement="bottom" fullscreen>
     <screenfull id="screenfull" class="el-icon-full-screen" @click="isScreenFull" />
</el-tooltip>

3、script代码

<script>
//引入全屏插件
import screenfull from "screenfull";
data() {
    return {
      isFullscreen: false
    };
  },
  methods: {
      //全屏方法
    isScreenFull() {
      // 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题  判断改为 !screenfull.isEnabled  就可以了

      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: "您的浏览器版本过低不支持全屏显示！",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
    }
  }
};

完成以上操作，全屏功能即可实现。