vue实现全屏,组件screenfull的使用
screenfull是vue的一个全屏组件。可以实现全屏展示与正常展示的切换。2、创建一个空文件screenfull_save.vue,用于封装 screenfull组件。3、在需要展示全屏显示的页面,引入组件。1、在vue项目中安装组件。
·
screenfull是vue的一个全屏组件。可以实现全屏展示与正常展示的切换。并且会进行自适应。
使用步骤:
1、在vue项目中安装组件
npm install screenfull --save
2、创建一个空文件screenfull_save.vue,用于封装 screenfull组件。
<template>
<div style="width: 100%;height: 100%;">
<div style="float: right;height: 100%;position: relative;display: flex;align-items: center;">
<el-button @click="screenfullClick">{{ isFullscreen ? '退出全屏' : '全屏展示' }}</el-button>
</div>
</div>
</template>
<script setup>
import screenfull from 'screenfull'
import { ref, onMounted, onUnmounted } from 'vue'
const isFullscreen = ref(false)
onMounted(() => {
window.addEventListener('resize', currentScreen)
})
onUnmounted(() => {
window.removeEventListener('resize', currentScreen)
})
const currentScreen = () => {
if(screenfull.isFullscreen !== isFullscreen.value) isFullscreen.value = screenfull.isFullscreen
}
const screenfullClick = () => {
if (screenfull.isEnabled) screenfull.toggle()
}
</script>
<style scoped>
.top-right {
float: right;
height: 100%;
position: relative;
}
</style>
3、在需要展示全屏显示的页面,引入组件。
import screenfull from "@/components/layout/screenfull_save.vue";
更多推荐
所有评论(0)