美文网首页
Vue js让指定div容器全屏

Vue js让指定div容器全屏

作者: 轩辕夜空 | 来源:发表于2021-11-10 08:47 被阅读0次
    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 (elem.msRequestFullscreen) {
            elem.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()
          }
        }
      }
    }
    

    来源:https://www.wanjunshijie.com/note/vue/1658.html

    相关文章

      网友评论

          本文标题:Vue js让指定div容器全屏

          本文链接:https://www.haomeiwen.com/subject/wajbzltx.html