在vue中使用screenfull 依赖,实现全屏组件方式
作者：多看书少吃饭
这篇文章主要介绍了在vue中使用screenfull 依赖，实现全屏组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue使用screenfull依赖,实现全屏组件
需求:将页面全屏化,实现按F11全屏的效果
实现：
1.下载screenfull依赖
npm install --save screenfull
2.在components文件夹下封装一个全屏组件FullScreen
index.vue代码如下,直接cv就可以使用
<template>
<div class="full-screen-wrapper" @click="handleFullscreen">
<el-tooltip
effect="dark"
:content="isFullscreen ? '退出全屏' : '全屏'"
placement="bottom"
>
<i
:class="[
'icon',
!isFullscreen
? 'vue-dsn-icon-fullscreen'
: 'vue-dsn-icon-tuichuquanping',
]"
/>
</el-tooltip>
</div>
</template>
<script>
import screenfull from "screenfull";
export default {
name: "FullScreen",
data() {
return {
isFullscreen: false,
};
},
mounted() {
this.init();
},
beforeDestroy() {
this.destroy();
},
methods: {
handleFullscreen() {
if (screenfull.enabled) {
this.$message({
message: "不支持全屏!",
type: "warning",
});
return false;
}
screenfull.toggle();
},
change() {
this.isFullscreen = screenfull.isFullscreen;
},
init() {
if (!screenfull.enabled) {
screenfull.on("change", this.change);
}
},
destroy() {
if (!screenfull.enabled) {
screenfull.off("change", this.change);
}
},
},
};
</script>
<style lang="less">
.full-screen-wrapper {
float: left;
width: 22px;
height: 22px;
padding: 4px;
cursor: pointer;
.icon {
font-size: 24px;
}
&:hover {
color: #409eff;
}
}
</style>在哪里需要调用这个组件，就可以通过
组件调用的方式来直接调用
vue使用Screenfull全屏切换
1.在终端执行命令 npm install --save screenfull
2.在components文件中创建Screenfull文件里面的代码如下
<template>
<div>
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'Screenfull',
data() {
return {
isFullscreen: false
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.destroy()
},
methods: {
click() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle()
},
change() {
this.isFullscreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
screenfull.off('change', this.change)
}
}
}
}
</script>
<style scoped>
.screenfull-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
width: 20px;
height: 20px;
vertical-align: 10px;
}
</style>
3.在需要的用的页面引入我们的Screenfull文件
4.页面的使用方法
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。