vue-fullscreen实现全屏功能

实现效果如下：

实现方式：
1、下载vue-fullscreen依赖

npm install vue-fullscreen

2、在mian.js中引用并注册

import fullscreen from 'vue-fullscreen'
Vue.use(fullscreen)

3、在页面上使用

// 全屏
    onFullScreen() {
    	if (this.fullscreen) {
	        this.$fullscreen.exit(); //退出全屏
	    } else {
      		// 通过ref拿到具体的、希望全屏展示的元素
      		let dom = this.$refs.page; 
		    //打开全屏
		    this.$fullscreen.enter(dom, {
		       wrap: false,
		       callback: (f) => {
		         this.fullscreen = f;
		       }
		   });
		 }
    }

4、css

/* 全屏样式 */    
.fullscreen{
  background: #fff; /*背景色设为白色*/
}