Annuaire d'articles
1. Téléchargez le plug-in
Il est recommandé de télécharger la version 5.1.0 spécifiée, sinon il pourrait y avoir une erreur
npm install --save [email protected]
2. Présentation des pages
import screenfull from "screenfull"
Page plein écran
3. Liez l'événement de clic à l'étiquette
<div @click="handleFull">全屏/退出全屏</div>
4. Écrivez le code de la méthode dans les méthodes
handleFull() {
if (screenfull.isEnabled) {
// 加个判断浏览器是否支持全屏
screenfull.toggle(); // 切换全屏状态
} else {
console.log("您的浏览器不支持全屏");
}
}
Page plein écran
5. Liez l'événement de clic à l'étiquette
<div id="demo" @click="container">指定元素全屏</div>
6. Écrivez le code de la méthode dans les méthodes
container() {
const element = document.getElementById("demo"); // 指定全屏元素
if (screenfull.isEnabled) {
screenfull.request(element);
this.elementFull = !this.elementFull; // 判断状态 决定是全屏还是退出全屏
if (this.elementFull) {
screenfull.toggle(); //全屏/退出全屏切换
}
}
}
Code complet
<template>
<div class="parentBox">
<div @click="handleFull" class="btn">全屏/退出全屏</div>
<div id="demo" @click="container">指定元素全屏</div>
</div>
</template>
<script>
import screenfull from "screenfull";
export default {
data() {
return {
elementFull: false,
};
},
methods: {
handleFull() {
if (screenfull.isEnabled) {
// 加个判断浏览器是否支持全屏
screenfull.toggle(); // 切换全屏状态
} else {
console.log("您的浏览器不支持全屏");
}
},
container() {
const element = document.getElementById("demo"); // 指定全屏元素
if (screenfull.isEnabled) {
screenfull.request(element);
this.elementFull = !this.elementFull; // 判断状态 决定是全屏还是退出全屏
if (this.elementFull) {
screenfull.toggle(); //全屏/退出全屏切换
}
}
},
},
};
</script>
<style scoped lang="scss">
.btn {
background-color: gray;
width: 200px;
}
#demo {
background-color: aqua;
width: 200px;
height: 200px;
}
</style>