1、给想全屏的元素设定ref属性
<div ref="box" class="big-box" @click="isScreenFull">
首页
</div>2、引入screenfull插件（需要提前安装npm install --save-dev screenfull@5.1.0）
//引入全屏插件
import screenfull from "screenfull";3、全屏方法
//全屏方法
isScreenFull() {
console.log(111);
if (!screenfull.isEnabled) {
// 如果不支持进入全屏，发出不支持提示
this.$message({
message: "您的浏览器版本过低不支持全屏显示！",
type: "warning",
});
return false;
}
//此处填入需要全屏的ref属性值即可
screenfull.toggle(this.$refs.box);
},4、完整代码
<template >
<div ref="box" class="big-box" @click="isScreenFull">
首页
</div>
</template>
<script>
//引入全屏插件
import screenfull from "screenfull";
export default {
data() {
return {};
},
created() {
this.$nextTick(() => {
this.isScreenFull()
});
},
methods: {
//全屏方法11
isScreenFull() {
console.log(111);
if (!screenfull.isEnabled) {
// 如果不支持进入全屏，发出不支持提示
this.$message({
message: "您的浏览器版本过低不支持全屏显示！",
type: "warning",
});
return false;
}
screenfull.toggle(this.$refs.box);
},
},
};
</script>
<style lang="scss" scoped>
.big-box{
background: pink;
}
</style>
5、效果图
文章来源：https://www.toymoban.com/news/detail-694278.html
文章来源地址https://www.toymoban.com/news/detail-694278.html
到了这里，关于vue项目实现局部全屏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
