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创建组件的两种方式 2023-10-08
- AJAX应用实例之检测用户名是否唯一(实例代码) 2023-02-14
- 在苹果Mac中如何将html网页转成PDF文件? 2023-10-27
- 前端(HTML)+后端(Django)+数据库(MySQL):用户注册及登录演示 2023-10-26
- Ajax上传图片及上传前先预览功能实例代码 2023-02-14
- Ajax实现文件下载 2022-12-15
- AJAX跨域问题解决方案详解 2023-02-24
- el-form-item把label改成自定义 2025-01-17
- 关于 javascript:VueJS 模板引用未定义多个 div? 2022-09-16
- webpack里使用jquery.mCustomScrollbar插件的方法 2024-04-04