vue浏览器全屏实现

1、项目中使用的是sreenfull插件，执行命令安装

npm insta小故事大道理50字ll --save screenfull

2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下：

togglefullscreen() {    if (!screenfull.enable非诚勿扰2经典台词d) {      this.$message({        message: 'you browr can not work',        type: 'warning'      })      return fal    }    screenfull.toggle()}

试了一下可以全屏，我用的chrome，ie9以下不要考虑

3、第一步完成之后就是怎么监听到全屏的变化，因为如果是通过esc键退出全屏，此时是没办法监听到的。经过一番查找，解决办法如下：

<script>import screenfull from 'screenfull'export default {  data () {      return {        isfullscreen: fal      }   }，  methods: {    /**     * 全屏家长开放日事件     */    screenfull() {      if (!screenfull.enabled) {        this.$message({          message: 'your browr does not work',          type: 'warning'        })        return fal      }      screenfull.toggle()      this.isfullscreen = true    },    /**     * 是否全屏并按键esc键的方法     */    che人与自然的和谐作文ckfull() {      var isfull = document.fullscreenenabled || window.fullscreen || document.webkitisfullscreen || document.msfullscreenenabled      // to fix : fal || undefined == undefined      if (isfull === undefined) {          isfull = fal      }      return isfull    }  },  mounted() {      window.onresize = () => {            // 全屏下监控是否按键了esc            if (!this.checkfull()) {              // 全屏下按键esc后要执行的动作              this.isfulls荷叶母亲教案creen = fal            }          }       }}</script>