Vue全屏显示效果实现

1、项目中使用的是sreenfull插件&＃xff0c;执行命令安装
第一步&＃xff1a;安装sreenfull插件&＃xff1a;
在命令行中执行&＃xff1a;&＃xff08;注&＃xff1a;因为这是生产依赖&＃xff0c;所以执行–save&＃xff09;当然你也可以在Vue的GUI的依赖选项中直接搜索screenfull来进行安装。

npm install screenfull save


2、html代码

3、script代码


//引入全屏插件
import screenfull from "screenfull";
data() {return {isFullscreen: false};},methods: {//全屏方法isScreenFull() {// 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题 判断改为 !screenfull.isEnabled 就可以了if (!screenfull.isEnabled) {// 如果不支持进入全屏&＃xff0c;发出不支持提示this.$message({message: "您的浏览器版本过低不支持全屏显示&＃xff01;",type: "warning"});return false;}screenfull.toggle();}}
};


完成以上操作&＃xff0c;全屏功能即可实现。