vue 实现某个div局部放大

使用

<div v-maxWindow>
	<div>放大div</div>
</div>

main.js引入

import "@/utils/zoom.js";

//zoom.js
 
/**
 * @author bing
 *  在需要放大窗口的div上 使用此指令 v-maxWindow,默认会在当前盒子最右侧出现
 * 基础用法   <div v-maxWindow ></div>
 * @since 
 * @param {string} el 支持绑定指定的calss或者id,  demo: <div v-maxWindow="{el:"#app"}"> </div>
 * @param {string} style   调整icon位置或样式,  demo:  <div v-maxWindow="{style:'right:0;padding:20px'}"> </div>
 * @param {string} activeClass  全屏时,在当前div追加 class 方便最大化的时候追加动画等其他操作
 * @param {string} restClass 还原时,追加div class 方便还原时,追加动画等其他操作
 * @param {function} callBack  打开与关闭的回调函数 (e)=>{},e: 1为打开 0为还原,demo: <div   v-maxWindow="{callBack:(e)=>{}}"> </div>
 *
 */
//maxWindow.js
// * @param {string} className   icon添加 class  demo:  <div v-maxWindow="{style:'right:0;padding:20px'}"> </div>
import Vue from "vue";
// 图标基础信息
const domList = [
  {
    dom: `<svg t="1696992086182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1588" width="24" height="24"><path d="M752 271H515a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8h285c17.673 0 32 14.327 32 32v285a8 8 0 0 1-8 8h-64a8 8 0 0 1-8-8V271zM273 751h237a8 8 0 0 1 8 8v64a8 8 0 0 1-8 8H225c-17.673 0-32-14.327-32-32V514a8 8 0 0 1 8-8h64a8 8 0 0 1 8 8v237z" fill="#323338" p-id="1589"></path></svg>`,
    tit: "最大化",
    id: "scale-max",
    hidden: false, //默认显示最大化
  },
  {
    dom: `<svg t="1696992546139" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4848" width="24" height="24"><path d="M412.3 544.8c36 0 65.5 27.3 69.1 62.3l0.4 7.1v291c0 10.3-8.4 18.7-18.7 18.7h-46c-10.3 0-18.7-8.4-18.7-18.7V628H120.3c-10.3 0-18.7-8.3-18.7-18.6v-46c0-10.3 8.4-18.7 18.7-18.7h292v0.1zM622.6 121.8V398h281.1c10.3 0 18.7 8.4 18.7 18.7v46c0 10.3-8.4 18.7-18.7 18.7h-295c-36 0-65.5-27.3-69.1-62.3l-0.4-7.1V121.8c0-10.3 8.4-18.7 18.7-18.7h46c10.4 0 18.7 8.4 18.7 18.7z" p-id="4849"></path></svg>`,
    tit: "还原",
    id: "scale-min",
    hidden: true,
  },
];
 
/**@ bing
 * v-maxWindow: div模块 最大化最小化
 */
Vue.directive("maxWindow", {
  //属性名称maxWindow，前面加v- 使用
  bind(dom, binding, vnode, oldVnode) {
    // 定时等待dom加载完成
    setTimeout(() => {
      let {
        el = "",
        style = "",
        className = "",
        callBack,
        activeClass = "show-max",
        restClass = "show-min",
      } = binding;
      let insertRule = null;
      // 获取页面样式列, 样式插入
      let sheet = document.styleSheets[0];
      let wDom = null;
      // 如果没有el直接吧当前指令模块所在的div放大
      if (!el) {
        // dom.style.float = "right";
        wDom = dom;
      } else {
        wDom = document.querySelector(el);
      }
 
      wDom.style.position = "relative";
      let cerateDiv = document.createElement("div");
      // cerateDiv.style.position = "absolute";
      // cerateDiv.style
 
      domList.map((item) => {
        // 创建一个div 包裹放大缩小图标
        let div = document.createElement("div");
        div.className = "div-scale";
        div.id = item.id;
        // div.style.position = "relative";
        div.hidden = item.hidden;
        div.innerHTML = `<p title="${item.tit}" style="width:30px; top:10px;right:10px; cursor: pointer;position:absolute;z-index:998;${style}" >${item.dom}</p>`;
        cerateDiv.prepend(div);
        insertRule = sheet.insertRule(
          ".max-window{width: 100vw!important; height: 100vh !important;margin:0;position:fixed!important;top:0;left:0;z-index:999;background:white}",
          0
        );
        div.onclick = () => {
          // 全部显示
          cerateDiv.firstChild.hidden = false;
          cerateDiv.lastChild.hidden = false;
          // 隐藏另一个dom
          div.hidden = true;
 
          if (item.id == "scale-max") {
            wDom.classList.add("max-window"); //与最大化展示相关的class
            // 窗口还原的时候删除最小化class,追加最大化class
            wDom.classList.remove(restClass);
            wDom.classList.add(activeClass);
 
            callBack ? callBack(1) : ""; //打开与还原的回调函数
          } else {
            // 窗口还原的时候删除最大化class,追加最小化class
            wDom.classList.remove(activeClass);
            wDom.classList.add(restClass);
 
            wDom.classList.remove("max-window");
            callBack ? callBack(0) : ""; //打开与还原的回调函数
          }
        };
      });
      wDom.prepend(cerateDiv);
    }, 0);
  },
});