安卓开发软件手机版_邀请函制作软件app_电商代运营公司100强_seo技术是干什么的

官网链接

1. 安装

pnpm add screenfull

2. 使用

<template><!-- 如果浏览器不支持全屏，则不显示这个图标 --><div class="screen-full" @click="changeScreenFull()" v-if="isScreenEnable"><!-- 全屏和非全屏的图标 --><SvgIcon:name="isScreenFull ? 'fullscreen-exit' : 'fullscreen'"color="#515151"width="30px"height="30px"></SvgIcon></div>
</template><script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import screenfull from 'screenfull'
// 是否支持全屏
const isScreenEnable = ref(screenfull.isEnabled)
// 用于控制图片状态
const isScreenFull = ref(false)
// 切换全屏
const changeScreenFull = () => {// 检查全屏功能是否可用if (!isScreenEnable.value) {ElMessage.error('浏览器不支持全屏')return}// 根据当前全屏状态进行切换if (screenfull.isFullscreen) {screenfull.exit()isScreenFull.value = false} else {screenfull.toggle()isScreenFull.value = true}
}
// 监听全屏状态, 当全屏状态改变时, 会触发change事件
onMounted(() => {screenfull.on('change', () => {})
})
// 停止监听
onUnmounted(() => {screenfull.off('change', () => {})
})
</script>

3. 方法

• 引入

import screenfull from 'screenfull'

• 是否可以全屏（属性）（浏览器的支持）

// 返回值是boolean类型
screenfull.isEnabled

• 开启全屏状态（方法）

screenfull.toggle()

• 退出全屏状态

screenfull.exit()

• 监听全屏状态发生改变时，可以执行回调

screenfull.on('change', () => {})

• 停止监听的回调

screenfull.off('change', () => {})