screenfull 设置对应模块全屏切换

安装 npm install --save screenfull

 //标签   
    
        <div
            id="zjCostBox"
            style="
              width: 98.5%;
              height: 92%;
              box-sizing: border-box;
              margin: 0 auto;
              border: 2px solid #c1c1c1;
            "
          >
            <el-button @click="dianjiBtn">点击</el-button>
          </div>

//js

import screenfull from 'screenfull'


//对应模块全屏切换
   dianjiBtn(){
      let element=document.getElementById("zjCostBox");
         if (screenfull.isEnabled) {
          // screenfull提供放大的方法
          // screenfull.request(element);
          screenfull.toggle(element);
        }
        screenfull.onchange((e) => {
          console.log(e);
        // screenfull.isFullscreen 表示当前是全屏还是非全屏
        if(screenfull.isFullscreen) {
          // 放大时可以触发的逻辑
        } else {
          // 缩小时可以触发的逻辑
        }
     })
   },