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项目中如何实现页面全屏功能
基础教程推荐
猜你喜欢
- Css浮动元素外层容器高度为0(无高度)的解决方法 2024-01-09
- vuepress 侧边栏自动生成 2023-10-08
- php – 我应该使用htmlspecialchars或mysql_real_escape_string还是两者 2023-10-26
- 常用JavaScript代码提示公共类封装 2023-12-14
- 基于element-ui组件手动实现单选和上传功能 2024-01-17
- 在Ajax中使用get和post所遇到的问题及解决办法 2023-01-20
- Ajax同步和异步问题浅析及解决方法 2023-01-31
- Echarts教程之通过Ajax实现动态加载折线图的方法 2023-02-14
- Vue3 从入门到实战 进阶式掌握完整知识体系 2023-10-08
- Ajax 传递JSON实例代码 2023-01-31
