今天分享使用screenfull实现全屏功能!
效果图
全屏前
全屏后
第一步
安装 screenfull
$ npm install screenfull
第二步
封装screenfull,用户体验更好
<!--
* @Author: your name
* @Date: 2021-10-28 19:31:51
* @LastEditTime: 2021-10-28 19:56:25
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /vue-manage-system-master/src/components/fullScreen.vue
-->
<template>
<div class="screenfullBtn" @click="toggleScreenfull">
{{isFullscreen ? '关闭全屏' : '全屏'}}
</div>
</template>
<script>
import { onMounted, onUnmounted, reactive, toRefs } from 'vue'
import screenfull from 'screenfull'
import { ElMessage } from 'element-plus'
export default {
setup () {
const state = reactive({
isFullscreen: false
})
onMounted(() => {
if (screenfull.isEnabled) {
screenfull.on('change', checkFullscreen)
}
})
onUnmounted(() => {
if (screenfull.isEnabled) {
screenfull.off('change', checkFullscreen)
}
})
function checkFullscreen () {
state.isFullscreen = screenfull.isFullscreen
}
function toggleScreenfull () {
if (screenfull.isEnabled) {
screenfull.toggle()
} else {
ElMessage.warning({
message: '抱歉,当前浏览器不支持该全屏功能,可尝试使用F11触发全屏',
center: true
})
}
}
return {
...toRefs(state),
toggleScreenfull
}
},
}
</script>
<style scoped>
</style>
第三步
父组件引用
<template>
<Screenfull />
</template>
<script>
import Screenfull from './Screenfull.vue'
</script>