技術標籤：vue前端jsvue全屏utils

vue 全屏放大縮小方法封裝

不廢話直接上程式碼（打卡：2020-12-24 ）

一、後臺管理全屏按鈕

html

   <div class="content_item2 plr8" @click="fullScreen">
     <svg-icon style="margin-right:10px" icon-class="全屏"></svg-icon>
    </div>

data

 data() {
    return {
      isfullScreen:true,
    };
  },
 

methods

	    fullScreen () {
	      if (this.isfullScreen) {
	        var docElm = document.documentElement
	        if (docElm.requestFullscreen) {
	          docElm.requestFullscreen()
	        } else if (docElm.mozRequestFullScreen) {
	          docElm.mozRequestFullScreen()
	        } else if (docElm.webkitRequestFullScreen) {
	          docElm.webkitRequestFullScreen()
	        } else if (elem.msRequestFullscreen) {
	          elem.msRequestFullscreen()
	        }
	        this.isfullScreen = false
	      } else {
	        if (document.exitFullscreen) {
	          document.exitFullscreen()
	        } else if (document.mozCancelFullScreen) {
	          document.mozCancelFullScreen()
	        } else if (document.webkitCancelFullScreen) {
	          document.webkitCancelFullScreen()
	        } else if (document.msExitFullscreen) {
	          document.msExitFullscreen()
	        }
	        this.isfullScreen = true
	      }
	    },
 

筆記：
全域性掛載方法
demo預覽