在vue项目中安装screenfull
npm install --save screenfull
引入
import screenfull from "screenfull";
点击时判断浏览器是否可全屏,不可全屏给提示,可全屏执行screenfull.toggle()
if (!screenfull.isEnabled) {
// 如果不允许进入全屏,发出不允许提示
this.$message({
message: "不支持全屏",
type: "warning"
});
return false;
}
screenfull.toggle();
完整组件代码
<template>
<!-- el-tooltip 文字提示 -->
<div class="btn-fullscreen" @click="buttoncli">
<el-tooltip
effect="dark"
:content="isFullscreen ? `取消全屏` : `全屏`"
placement="bottom-end"
>
<i
class="iconfont"
:class="isFullscreen ? 'icon-quxiaoquanping2' : 'icon-quanping2'"
></i>
</el-tooltip>
</div>
</template>
<script>
import screenfull from "screenfull";
// 全屏功能使用:1.安装,npm install --save screenfull
// 2.引入
// 3.点击时判断浏览器是否可全屏,不可全屏给提示,可全屏执行screenfull.toggle()
export default {
name: "Screenfull",
data() {
return {
isFullscreen: false
};
},
mounted() {
this.init();
},
methods: {
buttoncli() {
if (!screenfull.isEnabled) {
// 如果不允许进入全屏,发出不允许提示
this.$message({
message: "不支持全屏",
type: "warning"
});
return false;
}
screenfull.toggle();
},
change() {
this.isFullscreen = screenfull.isFullscreen;
},
init() {
if (screenfull.isEnabled) {
// screenfull.request(); // 并不支持默认全屏显示
screenfull.on("change", this.change);
}
}
}
};
</script>
<style lang="scss" scoped>
// 引入字体图标库
@import "//at.alicdn.com/t/font_2146611_q77iffjprho.css";
.btn-fullscreen {
display: inline-block;
margin: 0 15px;
.iconfont {
cursor: pointer;
&:hover {
color: #6396fd;
}
}
}
</style>