screenfull全屏插件的使用：【vue和angular都适用】
1、npm i screenfull@5 （建议是5开头的版本，5以上版本会报错）【我这里安装的是5.0.0的，yarn add screenfull@5.0.0】
2、如下代码
<template>
<div class="screenfull">
<button @click="toFul">摁我全屏</button>
</div>
</template>
<script>
import screenfull from "screenfull"; //只需要在vue文件内引入即可
export default {
data() {
return {
isFullscreen: false,
};
},
created() {},
methods: {
toFul() {
//这段注释掉是因为在chrome内测试会提示“不支持全屏”，所以就先注释了
// if (!screenfull.enabled) {
// // 如果不允许进入全屏，发出不允许提示
// alert("不支持全屏");
// return false;
// }
var buttonDom = document.getElementsByTagName("button")[0];
if (!this.isFullscreen) {
// 不是全屏
screenfull.toggle();
buttonDom.innerText = "退出全屏";
this.isFullscreen = true;
} else {
// 是全屏
screenfull.toggle();
buttonDom.innerText = "摁我全屏";
this.isFullscreen = false;
}
},
},
};
</script>
<style lang="less" scoped>
.screenfull {
display: flex;
justify-content: center;
align-items: center;
height: 1rem;
button {
font-size: 0.1rem;
}
}
</style>
