vue 全屏与退出全屏

vue 全屏与退出全屏

实现点击展开全屏或退出全屏


首先，安装

npm i screenfull@5 -S

然后在对应组件页面引入screenfull使用

<template>
  <div>
    <img @click="handleFull" v-show="!fullscreen" src="../../assets/images/index/full_screen_icon.png" title="全屏">
    <img @click="handleFull" v-show="fullscreen" src="../../assets/images/index/retract_icon.png" title="退出全屏">
  </div>
</template>
<script>
import screenfull from "screenfull";
export default {
  name: 'Fullscreen',
  data() {
    return {
      fullscreen: false
    }
  },
  methods: {
    //全屏||收缩
    handleFull() {
      screenfull.toggle();
      if (!screenfull.isEnabled) {
        this.$Message.error("该浏览器不支持全屏功能");
      }
      this.fullscreen = !this.fullscreen;
    }
  }
}
</script>

写博不易，如果觉得对你有帮助，点赞支持一下！！！