使用Vue全屏软件包时this$ refs.fullscreen.toggle不是功能错误

问题描述

大家好，我得到了错误 this。$ refs.fullscreen.toggle不是功能 当我尝试在我的项目中实现vue-fullscreen时。 这是我的代码。

<template>
 <div id="app">
<fullscreen ref="fullscreen" @change="fullscreenChange">
  Content
</fullscreen>
  <button type="button" @click="toggle" >Fullscreen</button>
 </div>
</template>
<script>
 import fullscreen from 'vue-fullscreen'
 import Vue from 'vue'
 Vue.use(fullscreen)
 export default {
 methods: {
  toggle () {
    this.$refs['fullscreen'].toggle() 
  },fullscreenChange (fullscreen) {
    this.fullscreen = fullscreen
  }
},data() {
  return {
    fullscreen: false
   }
  }
 }
</script>

解决方法

最后这项工作对我来说

document.querySelector("#toFull").addEventListener("fullscreenchange",function (event) {
        if (document.fullscreenElement) {
          document.querySelector("#exitFullScreen").style.display = "block";
        } else {
          document.querySelector("#exitFullScreen").style.display = "none";
        }
    });