基于vue.js实现全屏显示功能
实际项目中经常会遇到需要将页面中某一部分全屏显示,实现方式有很多,本文将介绍一种基于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
}
})
}