- 在src/utils/util.js中加入下面代码块
| import Vue from 'vue' |
| const util = Vue.prototype.util = {} |
| |
| util.fullScreen = function (element) { |
| element = element || document.body; |
| if (element.requestFullscreen) { |
| element.requestFullscreen(); |
| } else if (element.mozRequestFullScreen) { |
| element.mozRequestFullScreen(); |
| } else if (element.webkitRequestFullscreen) { |
| element.webkitRequestFullscreen(); |
| } else if (element.msRequestFullscreen) { |
| element.msRequestFullscreen(); |
| } |
| } |
| |
| |
| util.exitFullscreen = function () { |
| if (document.exitFullscreen) { |
| document.exitFullscreen(); |
| } else if (document.mozCancelFullScreen) { |
| document.mozCancelFullScreen(); |
| } else if (document.webkitExitFullscreen) { |
| document.webkitExitFullscreen(); |
| } |
| } |
| export { |
| util |
| } |
2、在页面中使用全屏/退出全屏
| <template> |
| <div class="header"> |
| |
| <a v-if="fullScreenFlag" href="javascript:;" class="iconfont iconquanping" title="全屏" @click="fullScreen()"></a> |
| |
| <a v-else href="javascript:;" class="iconfont icontuichuquanping1" title="退出全屏" @click="exitFullScreen()"></a> |
| </div> |
| </template> |
| <script> |
| export default { |
| data () { |
| return { |
| fullScreenFlag: true, |
| }; |
| }, |
| methods: { |
| |
| fullScreen(){ |
| this.fullScreenFlag = false; |
| this.util.fullScreen(); |
| }, |
| |
| exitFullScreen() { |
| this.fullScreenFlag = true; |
| this.util.exitFullscreen(); |
| }, |
| }, |
| }; |
| </script> |
| |
| |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了