[JavaScript知识库]Vue的全屏组件vue-fullscreen

用法：
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、将自定义组件，引入到要调用的父组件内即可。