vue组件全屏显示

最新推荐文章于 2023-09-21 09:49:05 发布

程序员阿明

最新推荐文章于 2023-09-21 09:49:05 发布

阅读量437

点赞数

本文链接：https://blog.csdn.net/weixin_41463944/article/details/115723451

版权

直接上代码

<template>
  <div>
    <button type="button" @click="toggle">全屏</button>
    <fullscreen ref="fullscreen" background="#ffffff" @change="fullscreenChange">
      <div ref="main_div" style="position: relative;" class="div-main">
        <Icon :type="!fullscreen ? 'ios-expand' : 'ios-contract'" size="30" class="expand-icon" @click="toggle" />
        需要全屏展示的内容
      </div>
    </fullscreen>
  </div>
</template>
<script>
  import fullscreen from 'vue-fullscreen'
  import Vue from 'vue'
  Vue.use(fullscreen)
  export default {
    data() {
      return {
        fullscreen: false,
      }
    },
    methods: {
      toggle() {
        this.$refs['fullscreen'].toggle() // recommended
        // this.fullscreen = !this.fullscreen // deprecated
      },
      fullscreenChange(fullscreen) {
        this.fullscreen = fullscreen
      },
    },
  }
</script>