screenfull 全屏插件的使用

1、npm i screenfull@5 （建议是5开头的版本，5以上版本会报错）
2、如下代码

<template>
  <div class="screenfull">
    <button @click="toFul">摁我全屏</button>
  </div>
</template>

<script>
import screenfull from "screenfull";  //只需要在vue文件内引入即可
export default {
  data() {
    return {
      isFullscreen: false,
    };
  },
  created() {},
  methods: {
    toFul() {
    //这段注释掉是因为在chrome内测试会提示“不支持全屏”，所以就先注释了
      //   if (!screenfull.enabled) {
      //     // 如果不允许进入全屏，发出不允许提示
      //     alert("不支持全屏");
      //     return false;
      //   }
      var buttonDom = document.getElementsByTagName("button")[0];
      if (!this.isFullscreen) {
        //   不是全屏
        screenfull.toggle();
        buttonDom.innerText = "退出全屏";
        this.isFullscreen = true;
      } else {
        //   是全屏
        screenfull.toggle();
        buttonDom.innerText = "摁我全屏";
        this.isFullscreen = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.screenfull {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1rem;
  button {
    font-size: 0.1rem;
  }
}
</style>