vue-cli點擊實現全屏功能

本文實例為大家分享了vue-cli點擊實現全屏功能的具體代碼，供大家參考，具體內容如下

項目中有點擊按鈕實現全屏功能

方式一：js實現全屏

代碼如下：

1. <template>
2. <div>
3. <a-button type="primary" @click="screen">全屏</a-button>
4. </div>
5. </template>
6.  
7. <script>
8. export default {
9. name: "index",
10. data(){
11. return{
12. fullscreen: false
13. }
14. },
15. methods:{
16. screen(){
17. let element = document.documentElement;
18. if (this.fullscreen) {
19. if (document.exitFullscreen) {
20. document.exitFullscreen();
21. } else if (document.webkitCancelFullScreen) {
22. document.webkitCancelFullScreen();
23. } else if (document.mozCancelFullScreen) {
24. document.mozCancelFullScreen();
25. } else if (document.msExitFullscreen) {
26. document.msExitFullscreen();
27. }
28. } else {
29. if (element.requestFullscreen) {
30. element.requestFullscreen();
31. } else if (element.webkitRequestFullScreen) {
32. element.webkitRequestFullScreen();
33. } else if (element.mozRequestFullScreen) {
34. element.mozRequestFullScreen();
35. } else if (element.msRequestFullscreen) {
36. // IE11
37. element.msRequestFullscreen();
38. }
39. }
40. this.fullscreen = !this.fullscreen;
41. }
42. }
43. }
44. </script>
45.  
46. <style scoped>
47.  
48. </style>

方式二：使用的是sreenfull插件，執行命令安裝

npm install --save screenfull

在使用的頁面正確引入：

import screenfull from ‘screenfull'

代碼如下：

1. <template>
2. <div>
3. <a-button type="primary" @click="screen">全屏</a-button>
4. </div>
5. </template>
6.  
7. <script>
8. import screenfull from 'screenfull'
9. export default {
10. name: "home",
11. data() {
12. return {
13. //默認不全屏
14. isFullscreen: false
15. }
16. },
17.  
18. methods: {
19. screen(){
20. // 如果不允許進入全屏，發出不允許提示
21. if (!screenfull.enabled) {
22. this.$message('您的瀏覽器不能全屏');
23. return false
24. }
25. screenfull.toggle();
26. this.$message.success('全屏啦')
27. }
28. }
29. }
30. </script>
31.  
32. <style scoped>
33.  
34. </style>

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