vue项目中如何实现页面全屏功能

vue项目中如何实现页面全屏显示，下面web建站小编给大家详细介绍一下实现代码！

1、安装脚手架

npm install vue-fullscreen

2、main.js全局引入

import fullscreen from 'vue-fullscreen'

Vue.use(fullscreen)

3、具体代码调用

fullscreen() {
  // 需要全屏显示的dom元素
  let dom = this.$el.querySelector('.div')     
  // 调用全屏方法      
  this.$fullscreen.enter(dom, {  
    wrap: false, 
    callback: f => {
       this.fullscreenFlag = f       
    }     
  })    
 }

js按钮控制全屏和退出全屏

标签： vue-fullscreen, 页面全屏

上面是“vue项目中如何实现页面全屏功能”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3036.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！