vue簡單實現全屏功能(screenfull)/阻止頁面返回

全屏/取消全屏

一，下載screenfull.js

npm install screenfull --save
// 如果取到的瀏覽器允許全屏的值為undefind(調用顯示不能全屏) 或者引用screenfull 出現錯誤，換下面的語句
cnpm install screenfull@4.2.0 --save

二，vue中的簡單使用

<template>
  <div>
    <button type="primary" @click="screen">全屏</button>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  name: "home",
  methods: {
    screen() {
      // 如果不允許進入全屏，發出不允許提示
      if (!screenfull.enabled) {
        this.$message("您的瀏覽器不能全屏");
        return false;
      }
      screenfull.toggle();
    },
  },
};
</script>

 

 

 

阻止返回

一，一個簡單的方式

在頁面中加入以下代碼(或者加在mounted中)：

history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });

這種方式，阻止其他頁面返回此頁面

二，使用vue-prevent-browser-back插件

安裝

 npm install vue-prevent-browser-back --save
 npm install --save screenfull

使用

import preventBack from "vue-prevent-browser-back";//在需要的組件中引入
export default {
  mixins: [preventBack], //注入
}

這種方式，阻止此頁面返回其他頁面

 

 

 

注：測試完畢，非常好用