0
点赞
收藏
分享

微信扫一扫

vue3使用screenfull实现全屏 #yyds干货盘点#

彩虹_bd07 2022-02-23 阅读 28

理论

npm地址:https://www.npmjs.com/package/screenfull

使用方法

  1. 安装
    npm install screenfull --save
  2. 在使用.vue文件中 引入
    import screenfull from 'screenfull'
  3. 在按钮方法中调用方法可以双向切换全屏与非全屏
    screenfull.toggle()

还可以

  • 检测全屏状态
    screenfull.isFullscreen
  • 测试浏览器是否支持全screenfull
    screenfull.isEnabled

API

screenfull 插件常用方法:

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

示例

安装screenfull

cnpm install --save screenfull

页面使用

<template>
    <el-button @click="toggleFullscreen">全屏</el-button>
</template>

<script lang="ts">
import screenfull from 'screenfull'

export default {
  name: 'Home',
  setup() {
    function toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      }
    }

    return {
      toggleFullscreen
    }
  }
}
</script>
举报

相关推荐

0 条评论