vue项目中如何实现页面全屏显示,下面编程教程网小编给大家详细介绍一下实现代码!
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
}
})
}
以上是编程学习网小编为您介绍的“vue项目中如何实现页面全屏功能”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vue项目中如何实现页面全屏功能


猜你喜欢
- vue.js实现会动的简历(包含底部导航功能,编辑功能) 2023-12-23
- TypeScript 泛型的使用 2023-08-08
- Ajax解决缓存的5种方法总结(推荐) 2023-01-26
- vuejs开发的命名规范 2024-12-08
- HTML5实现无刷新修改URL的方法 2024-03-09
- jQuery niceScroll滚动条错位问题的解决方法 2024-02-21
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- 如何在HTML / jquery中为Linux终端生成256个调色板 2023-10-25
- vue $router和$route的区别详解 2024-03-01
- 小程序实现瀑布流动态加载列表 2022-08-30