您的位置 首页 技术专栏

vue.js怎么实现全屏显示功能

24小时课堂在线收录vue.js怎么实现全屏显示功能,vue.js实现全屏显示功能的方法:1、安装vue-fullscreen;2、在mian.js中引用并注册;3、调用全屏方法,如【this….感谢您关注vue.js怎么实现全屏显示功能。

vue.js实现全屏显示功能的方法:1、安装vue-fullscreen;2、在mian.js中引用并注册;3、调用全屏方法,如【this.$fullscreen.enter(dom, {wrap: false,callback:…】。

本文操作环境:windows10系统、vue 2.5.2、thinkpad t480电脑。

在实际开发中我们可能会遇到需要将页面中的某一部分全屏显示的情况,其实实现方式有很多种,但是今天我们只介绍基于vue的实现方式。

具体步骤如下所示:

1、安装vue-fullscreen

在项目中执行命令

‘npm install vue-fullscreen’

2、在mian.js中引用并注册

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

3、具体代码实现:

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

学习推荐:php培训

以上就是vue.js怎么实现全屏显示功能的详细内容,更多请关注24小时课堂在线其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/96338.html

为您推荐

返回顶部