Vue让指定div容器全屏

最新推荐文章于 2024-08-18 23:55:13 发布

前端vue

最新推荐文章于 2024-08-18 23:55:13 发布

阅读量863

点赞数 1

分类专栏： vue 文章标签：软件开发 vue js

本文链接：https://blog.csdn.net/lichengzhong01/article/details/121396505

版权

vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

export default {
  name: 'top',
  components: {},
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
      a: 0,
    }
  },
  watch: {},
  mounted () {
    var that = this
  },
  methods: {
    quanping () {
      this.a++
      this.a % 2 == 1 ? this.enterfullscreen() : this.exitfullscreen()
    },
    //控制全屏
    enterfullscreen () { //进入全屏
      var docElm = document.getElementById('homeid')  // 指定容器id
      //W3C
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      }
      //FireFox
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      }
      //Chrome等
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      }
      //IE11
      else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      }
    },
    //退出全屏
    exitfullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    }
  }
}

如果不需要指定容器用插件 screenfull 即可：

1.安装引用
npm install screenfull --save
import screenfull from ‘screenfull’
2、使用

data(){
     return {
 		 //默认不全屏
         isFullscreen: false
     } 
  },

click(){
     // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
     if(!screenfull.enabled){
         this.$message({
             message:'浏览器不能全屏',
             type:'warning'
         })
         return false
     }
   	screenfull.toggle()
    this.$message({
         message: '全屏啦',
         type: 'success'
     })
 }