需求：点击按钮项目的当前页全屏

项目环境 vue2

使用插件 screenfull

安装

npm install screenfull --save

代码

<template><div class="btn-fullscreen"><svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /></div>
</template><script>
// 引入screenfull 全屏插件
import screenfull from "screenfull";export default {name: "Screenfull",data() {return {isFullscreen: false,// 默认不全屏};},mounted() {this.init();},beforeDestroy() {this.destroy();},methods: {click() {// 先使用screenfull.enabled方法判断是否支持screenfull// 如果不允许进入全屏，发出不允许提示 浏览器不能全屏if (!screenfull.enabled) {this.$message({message: "you browser can not work",type: "warning",});return false;}// 调用 screenfull.toggle() 可以双向切换全屏与非全屏screenfull.toggle();},change() {this.isFullscreen = screenfull.isFullscreen;},init() {if (screenfull.enabled) {screenfull.on("change", this.change);}},destroy() {if (screenfull.enabled) {screenfull.off("change", this.change);}},},
};
</script>

注：
isFullscreen : 是否是全屏状态
isEnabled ： 判断是否支持全屏

其他全屏教程