screenfull.js实现全屏功能（vue项目中运用）

（本文为博主根据自己经验写的，如有错误之处，欢迎指正，不喜勿喷，以和为贵）

1. 在我们做的项目中可能会有全屏功能的需求，其实这个也比较简单实现，下面我们介绍以screenfull.js实现全屏功能，废话不多说，直接上代码。

第一步：安装：

在命令行中执行：npm install --save screenfull   （注：因为这是生产依赖，所以执行--save）

第二步：直接上代码：

<template>
	<el-button type="primary" class="button" @click="buttoncli">摁我全屏</el-button>
</template>

<script>
	import screenfull from 'screenfull'
//	全屏功能使用:1.安装,npm install --save screenfull
//	         2.引入
//	         3.点击时判断浏览器是否可全屏,不可全屏给提示,可全屏执行screenfull.toggle()
	export default{
		data(){
			return{
				isFullscreen: false
			}
		},
		methods:{
			buttoncli(){
				if (!screenfull.enabled) { // 如果不允许进入全屏，发出不允许提示
		        this.$message({
		          message: '不支持全屏',
		          type: 'warning'
		        })
		        return false
		     }
		      screenfull.toggle()
		      this.$message({
		          message: '全屏啦',
		          type: 'success'
		        })
			}
		}
	}
</script>

这是最基本的实现全屏功能就完成了，还有更多的用法和API可以去screenfull.js官网学习，谢谢！