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], //注入
}

这种方式，阻止此页面返回其他页面

 

 

 

注：测试完毕，非常好用