填坑：操作div全屏时踩下的雷区

操作div全屏时踩下的雷区

前言

最近在公司开发一个项目，其中一个页面展示了三个表格，而且其中的一个表格需要展示40多个字段。看到需求的时候，瞬间无语了。但是作为一个合格的打工人，不管需求多么奇葩，东西总要给人做出来的。因此想到，每个表格都可以让它放到最大。表格的展示的列可以控制。
在实现div全屏时遇到一个问题，记录于此。

正文

<template>
  <div class="fullscreen">
      <div class="fullscreen-header">
          <div class="fullscreen-btn">
              <button @click="handleClick">{{isFullAllScreen?"还原":"全屏"}}</button>
          </div>
      </div>
      <div class="fullscreen-wrap">
          <slot></slot>
      </div>
  </div>
</template>

<script>
export default {
  name: 'full-screen',
  data () {
    return {
      isFullAllScreen: false
    }
  },
  methods: {
    handleClick (e) {
      console.log(e)
      e.stopPropagation()
      this.isFullAllScreen ? this.exitFullScreen() : this.setDomFullScreen(this.$el)
    },
    setDomFullScreen (el) {
      const rfs = el.requestFullscreen || el.webkitRequestFullScreen
      if (rfs) {
        rfs().then(a => {
          console.log(a)
          this.isFullAllScreen = true
        }).catch(e => {
          console.log(e)
        })
      }
    },
    exitFullScreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
        this.isFullAllScreen = false
      }
    }
  }
}
</script>

<style>
 .fullscreen{
     position: static;
 }
 .fullscreen-header{
     position: relative;
     overflow: visible;
 }
 .fullscreen-btn{
     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 40;
 }
.fullscreen-wrap{
    position: relative;
}
</style>

点击按钮时报错：

TypeError: Failed to execute 'requestFullscreen' on 'Element': Illegal invocation
    at Proxy.setDomFullScreen (FullScreen.vue?30ea:31)
    at Proxy.handleClick (FullScreen.vue?30ea:26)
    at onClick._cache.<computed>._cache.<computed> (FullScreen.vue?30ea:5)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:301)

原因竟然是：

运行环境上下文绑定问题；
组件中rfs的调用者已经不是el.
解决方法：
使用bind函数，或者call、apply方法。