Vue的全屏组件vue-fullscreen

最新推荐文章于 2024-08-20 08:53:05 发布

王新新2255

最新推荐文章于 2024-08-20 08:53:05 发布

阅读量6.4k

点赞数 2

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_60336681/article/details/120726564

版权

本文介绍了如何在Vue项目中使用vue-fullscreen插件实现全屏功能。首先通过npm安装组件，然后在main.js中引入并安装。接着，在自定义组件中使用fullscreen指令，并设置点击按钮切换全屏状态。最后，将组件引入到父组件中即可实现全屏显示。

摘要由CSDN通过智能技术生成

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