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

完成以上操做，全屏功能便可實現。