简述vue项目中指定某个DOM进入全屏模式与退出全屏

vue项目中指定某个DOM进入全屏模式与退出全屏

1. 首先安装全屏插件

npm install screenfull@4.2.1 --save

2. 在使用的页面中引入

import screenfull from ‘screenfull’

1. 我们指定某个DOM元素的id，然后获取这个DOM节点

methods: {
  // 定义全屏方法，通过按钮点击触发
  fullscreenHandle () {
    const element = document.getElementById('table_max') // 指定元素进入全屏模式
    if (!screenfull.enabled) return this.$message.info('您的浏览器不支持全屏')
    screenfull.request(element) // 开启全屏
    screenfull.toggle() // 退出全屏
  }
}

遇到的问题

如果报以下错误的话 请将screenfull.toggle() 替换成 screenfull.exit()

Uncaught (in promise) TypeError: fullscreen error