Vue3的全屏插件

目录

官网：screenfull 

一、安装

 二、在.vue里使用

三、效果

Vue3中我用的是 screenfull 插件

官网：screenfull 

相关API

• .request(ele) 全屏
• .exit() 退出全屏
• .toggle() 切换全屏
• .on(event, function) ： event为 ‘change’ | ‘error’ 注册事件
• .off(event, function) ： 移除前面已经注册的事件
• .element： 返回一个全屏的dom节点，如果没有就为 null
• .isFullscreen ： 是否是全屏状态
• .isEnabled ： 判断是否支持全屏

一、安装

npm install screenfull --save

 二、在.vue里使用

  
    
      {{ isFullscreen ? '退出全屏' : '全屏展示' }}    
  
   //  按需引入 screenfull  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()  }  .top-right {    float: right;    height: 100%;    position: relative;  }

三、效果

点击全屏 效果

组词