this.$refs.fullscreen.toggle is not function 错误使用vue全屏包时

Question

大家好我收到错误了 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>

Answer 1

终于对我有用了

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

this.$refs.fullscreen.toggle is not function 错误使用vue全屏包时

this.$refs.fullscreen.toggle is not a function error when using Vue full screen package

vue.js

fullscreen