记录第一次做大屏可视化,实现全屏看网上说法进行操作,实际还是有很多的小问题。
问题1:下载后导入报错
看了一个大概是webpack需要修改,挺麻烦的。所以我们直接降级尝试下
解决办法
npm i screenfull@5.1.0
接着正常导入即可
import screenfull from "screenfull/dist/screenfull";
如何使用
其实很简单,直接cv下面即可
methods: {
isScreenFull() {
if (!screenfull.isEnabled) {
// 如果不支持进入全屏,发出不支持提示
this.$message({
message: "您的浏览器版本过低不支持全屏显示!",
type: "warning",
});
return false;
}
screenfull.toggle();
},
}
此时问题1 如果你是直接在mounted钩子函数使用就会报错
因为现在浏览器中,全屏功能需要用户的允许,为了能够请求全屏权限,你需要在用户的交互行为中进行,比如你可以添加点击事件 或者 鼠标事件等
<div class="box" @click="isScreenFull"> </div>
也就是在点击事件中执行全屏的方法。