vue.js - 使用Vue全屏包时this.$refs.fullscreen.toggle不是函数错误

Question

大家好， 当我尝试在我的项目中实现 vue-fullscreen 时，我收到错误this.$refs.fullscreen.toggle is not a function 。这是我的代码。

<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>

标签： vue.jsfullscreen

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";
        }
    });