全屏显示功能

screenfull

• 依赖下载

   yarn add screenfull --save-dev
  

• 使用

  <template><!-- 全屏的字体图标 --><header><i class="iconfont icon-quanping"> </i></header>
  </template>
  <script>
  import screenfull from "screenfull";export default {data() {return {// 默认非全屏isFullscreen: false,};},methods: {// click 事件是在被全屏按钮点击时调用,只需要调用此方法即可click() {if (!screenfull.isEnabled) {this.$message.warning("你的浏览器不支持全屏");return false;}// 切换全屏状态screenfull.toggle();},change() {// 监听全屏状态的变化，更新 isFullscreen 属性this.isFullscreen = screenfull.isFullscreen;},init() {if (screenfull.isEnabled) {// 在全屏状态变化时触发 change 方法screenfull.on("change", this.change);}},},mounted() {// 在组件挂载时初始化全屏功能this.init();},destory() {if (screenfull.isEnabled) {// 在组件销毁时解绑全屏状态变化事件screenfull.on("change", this.change);}},
  };
  </script>