vue中实现全屏----插件screenfull.js

安装screenfull.js

npm install screenfull --save
// 如果取到的浏览器允许全屏的值为undefind(调用显示不能全屏)，换下面的语句
cnpm install screenfull@4.2.0 --save

在vue中的使用

<template>
	<div class="btn-fullscreen">
			<!--1.这里使用了elementui的图标，调用方法中的全屏事件-->
          <i class="el-icon-rank" @click="fullScreen()"></i>
        </div>
</template>
<script>
// 引入screenfull
import screenfull from 'screenfull'
export default {
  data () {
    return {
      // 默认不全屏
      isFullscreen: false,
    }
   }，
   methods () {
   	 fullScreen () {
	    // 先使用screenfull.enabled方法判断是否支持screenfull
	   // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
	   if(!screenfull.enabled){
	         this.$message({
	             message:'浏览器不能全屏，安装其他版本试试',
	             type:'warning'
	         })
	         return false
	     }
	     // 调用 screenfull.toggle() 可以双向切换全屏与非全屏
	   	screenfull.toggle()
	    this.$message({
	         message: '已全屏',
	         type: 'success'
	     })
	  }
   }
}
</script>

screenfull的API

• request(ele) 全屏
• exit() 退出全屏
• toggle() 切换全屏
• on(event, function) ： event为 ‘change’ | ‘error’ 注册事件
• off(event, function) ： 移除前面已经注册的事件
• element： 返回一个全屏的dom节点，如果没有就为 null
• isFullscreen : 是否是全屏状态
• isEnabled ： 判断是否支持全屏