Vue 全屏顯示效果實現

一、項目中使用的是sreenfull插件,執行命令安裝
第一步:安裝sreenfull插件:
在命令行中執行:(注:由於這是生產依賴,因此執行–save)固然你也能夠在Vue的GUI的依賴選項中直接搜索screenfull來進行安裝。

html

npm install screenfull  save

二、html代碼npm

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

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

相關文章
相關標籤/搜索