用法:
1、在项目中安装组件

 npm install vue-fullscreen --save

2、在main.js文件中引入并安装

  import fullscreen from 'vue-fullscreen'
 
  Vue.use(fullscreen)

3、自定义组件,放上要全屏显示的内容

<template>
  <div>
    
    <fullscreen :fullscreen.sync="fullscreen">
      <img src="../assets/logo.png" alt="">
      //fullscreen组件内包裹的内容,即为全屏显示的内容     
    </fullscreen>

    <button @click="toggle">点击全屏</button>
  
  </div>
</template>

<script>
  export default{
    data(){
      return{
        fullscreen:false

      }
    },
    methods: {
      toggle(){
        this.fullscreen=!this.fullscreen
      }
    }
  }
</script>

<style lang="scss">
</style>

4、将自定义组件,引入到要调用的父组件内即可。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐