Fullscreen.js 1.1 KB

1234567891011121314151617181920212223242526272829303132
  1. const template=`
  2. <div class="toolBar-icon font-size-icon" @click="changeFullScreen" style="position: relative;">
  3. <i :class="['fa',isFull?'fa-compress':'fa-arrows-alt']"></i>
  4. </div>
  5. `;
  6. export default {
  7. name: "Fullscreen",
  8. data: function () {
  9. return {
  10. isFull:false
  11. }
  12. },
  13. created:function (){
  14. },
  15. props:{
  16. },
  17. template:template,
  18. methods:{
  19. changeFullScreen:function (){
  20. let doc = document.documentElement;
  21. if (this.isFull) {
  22. this.isFull=false;
  23. document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitExitFullscreen && document.webkitExitFullscreen();
  24. } else {
  25. this.isFull=true;
  26. doc.requestFullscreen ? doc.requestFullscreen() : doc.mozRequestFullScreen ? doc.mozRequestFullScreen() : doc.webkitRequestFullscreen ? doc.webkitRequestFullscreen() : doc.msRequestFullscreen && doc.msRequestFullscreen();
  27. }
  28. }
  29. }
  30. };