vue项目实现局部全屏完整代码
作者：nxKJD
最近需要做一个全屏功能,所以这里给大家总结下,这篇文章主要给大家介绍了关于vue项目实现局部全屏的相关资料,需要的朋友可以参考下
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、效果图
总结
到此这篇关于vue项目实现局部全屏的文章就介绍到这了,更多相关vue局部全屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！