vue全屏事件開發詳解

本文實例為大家分享了vue全屏事件開發的具體代碼，供大家參考，具體內容如下

在項目中有需求相應瀏覽器全屏，寫了個案例代碼

先看看效果吧

全屏顯示：

html代碼：

1. <!-- el-tooltip 文字提示 -->
2. <div class="btn-fullscreen" @click="handleFullScreen">
3. <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
4. <i class="el-icon-rank"></i>
5. </el-tooltip>
6. </div>

js代碼

1. data(){
2. return {
3. fullscreen: false
4. }
5. }
6.  
7. // 全屏事件
8. handleFullScreen(){
9. let element = document.documentElement;
10. if (this.fullscreen) {
11. if (document.exitFullscreen) {
12. document.exitFullscreen();
13. } else if (document.webkitCancelFullScreen) {
14. document.webkitCancelFullScreen();
15. } else if (document.mozCancelFullScreen) {
16. document.mozCancelFullScreen();
17. } else if (document.msExitFullscreen) {
18. document.msExitFullscreen();
19. }
20. } else {
21. if (element.requestFullscreen) {
22. element.requestFullscreen();
23. } else if (element.webkitRequestFullScreen) {
24. element.webkitRequestFullScreen();
25. } else if (element.mozRequestFullScreen) {
26. element.mozRequestFullScreen();
27. } else if (element.msRequestFullscreen) {
28. // IE11
29. element.msRequestFullscreen();
30. }
31. }
32. this.fullscreen = !this.fullscreen;
33. },

通過fullscreen判斷的true和false確定是否相應全屏

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。