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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。