Vue 全屏显示效果实现

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

npm install screenfull  save

二、html代码

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

三、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();
    }
  }
};

完成以上操做，全屏功能便可实现。