vue实现全屏，退出全屏的功能

前前前前端静静的第三篇记录

最近在准备紧张的考试，有个功能还是第一次写呢，就是vue实现全屏，退出全屏的功能

1.下载插件 npm i screenfull -S
下载完这个插件后在package.json中可以看到

  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.1",
    "screenfull": "^5.1.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

screenfull就是下载的插件，在依赖项里面也可以看见screenfull这个文件夹
2.在需要的页面引入这个插件
import screenfull from “screenfull”;
3.在node_modules这个文件夹里面可以看到screenfull这个文件夹
把这个文件夹打开有个dist文件，点击screenfull.js文件，就可以看见如下的代码

var screenfull = {
		request: function (element, options) {
			return new Promise(function (resolve, reject) {
				var onFullScreenEntered = function () {
					this.off('change', onFullScreenEntered);
					resolve();
				}.bind(this);

				this.on('change', onFullScreenEntered);

				element = element || document.documentElement;

				var returnPromise = element[fn.requestFullscreen](options);

				if (returnPromise instanceof Promise) {
					returnPromise.then(onFullScreenEntered).catch(reject);
				}
			}.bind(this));
		},
		exit: function () {
			return new Promise(function (resolve, reject) {
				if (!this.isFullscreen) {
					resolve();
					return;
				}

				var onFullScreenExit = function () {
					this.off('change', onFullScreenExit);
					resolve();
				}.bind(this);

				this.on('change', onFullScreenExit);

				var returnPromise = document[fn.exitFullscreen]();

				if (returnPromise instanceof Promise) {
					returnPromise.then(onFullScreenExit).catch(reject);
				}
			}.bind(this));
		},
		toggle: function (element, options) {
			return this.isFullscreen ? this.exit() : this.request(element, options);
		},

toggle就是控制全屏与退出全屏的方法

data() {
    return {
      value: "",
      isFull: false, //是否全屏
    };
  },

 <div class="full" @click="full">
      <!-- 全屏 -->
      <span class="el-icon-full-screen" v-show="isFull"></span>
      <!-- 不是全屏 -->
      <span class="el-icon-rank" v-show="!isFull"></span>
    </div>

这里用的是element-ui里面的图标
然后就是

methods: {
    full() {
      screenfull.toggle();
      if (!screenfull.isEnabled) {
        this.$message({
          message: "该浏览器不支持全屏功能",
          type: "warning",
        });
      }
      this.isFull = !this.isFull
    },
  },

按照以上的步骤就可一实现全屏，退出全屏了