vue2实现全屏切换

AKA__老方丈

已于 2023-08-12 17:00:51 修改

阅读量1k

点赞数 1

文章标签： css vue.js html npm 前端 javascript

于 2023-08-09 17:46:37 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73321385/article/details/132193570

版权

1.安装插件

npm install screenfull --save

2.页面引入

// 全屏组件
import screenfull from 'screenfull'

3.绑定事件使用

  <!-- 全屏 -->
          <el-tooltip class="item" effect="dark" :content="isFullscreen ? '取消全屏' : '全屏'" placement="bottom">
          <i :class="isFullscreen ? 'el-icon-full-screen head-screen-news' : 'el-icon-rank head-screen'" @click="buttoncli"></i>
        </el-tooltip>

4.全屏点击事件

 // 全屏
    buttoncli() {
    
      screenfull.toggle()
    
      this.checkFull()
    
    },
    
    // 监控屏幕变化
    
    checkFull() {
    
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
    
      // 是否全屏判断
    
      this.isFullscreen = !this.isFullscreen;
    
      if (this.isFullscreen) {
    
        this.$message({
    
          message: '全屏啦',
    
          type: 'success'
    
        })
    
      } else {
    
        this.$message({
    
          message: '取消全屏',
    
          type: 'warning'
    
        })
    
      }
    
      if (isFull === undefined) {
    
        isFull = false;
    
      }
    
      return isFull;
    
    },