vue 全屏放大缩小方法封装

vue 全屏放大缩小方法封装

不废话直接上代码

一、后台管理全屏按钮

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
	      }
	    },

提示：
写法是自己对iconfont的封装使用
iconfont封装使用
笔记：
全局挂载方法
demo预览