给 VueQuill 添加全屏功能

1、添加fullscreen.js文件

const domList = [
  {
    dom: `<svg t="1637824425355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10463"><path d="M243.2 780.8v-179.2H153.6v179.2c0 49.28 40.32 89.6 89.6 89.6h179.2v-89.6H243.2zM780.8 153.6h-179.2v89.6h179.2v179.2h89.6V243.2c0-49.28-40.32-89.6-89.6-89.6zM243.2 243.2h179.2V153.6H243.2c-49.28 0-89.6 40.32-89.6 89.6v179.2h89.6V243.2z m537.6 537.6h-179.2v89.6h179.2c49.28 0 89.6-40.32 89.6-89.6v-179.2h-89.6v179.2z" p-id="10464" fill="#000000"></path></svg>`,
    tit: "最大化",
    id: "maxId",
    display: "block",
  },
  {
    dom: `<svg t="1637824296192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6336"><path d="M341.065143 910.189714v-146.285714c0-53.686857-43.885714-97.572571-97.572572-97.572571h-146.285714a48.786286 48.786286 0 0 0 0 97.499428h146.285714v146.285714a48.786286 48.786286 0 1 0 97.499429 0z m-292.571429-617.910857c0 26.916571 21.796571 48.786286 48.713143 48.786286h146.285714c53.686857 0 97.572571-43.885714 97.572572-97.572572v-146.285714a48.786286 48.786286 0 0 0-97.499429 0v146.285714h-146.285714a48.786286 48.786286 0 0 0-48.786286 48.786286z m910.409143 0a48.786286 48.786286 0 0 0-48.713143-48.786286h-146.285714v-146.285714a48.786286 48.786286 0 1 0-97.499429 0v146.285714c0 53.686857 43.885714 97.572571 97.499429 97.572572h146.285714a48.786286 48.786286 0 0 0 48.713143-48.786286z m0 422.765714a48.786286 48.786286 0 0 0-48.713143-48.713142h-146.285714c-53.686857 0-97.572571 43.885714-97.572571 97.572571v146.285714a48.786286 48.786286 0 1 0 97.499428 0v-146.285714h146.285714a48.786286 48.786286 0 0 0 48.786286-48.786286z" fill="#000000" p-id="6337"></path></svg>`,
    tit: "还原",
    id: "minId",
    display: "none",
  },
];

export function addFullscreen() {
  nextTick(() => {
    const headerEl = document.querySelector(".ql-toolbar");
    const el = document.querySelector(".editor");
    const containerEl = document.querySelector(".ql-container");
    if (!headerEl) return;

    domList.forEach((item) => {
      const dom = document.createElement("span");
      dom.className = "ql-formats";
      dom.innerHTML = `<button title="${item.tit}" style="display:${item.display}" id="${item.id}" type="button" class="ql-max">${item.dom}</button>`;
      headerEl.appendChild(dom);
    });

    // 最大化
    document.getElementById("maxId").onclick = () => {
      el.style.width = "100vw";
      el.style.height = "100vh";
      el.style.position = "fixed";
      el.style.top = "0";
      el.style.left = "0";
      el.style.zIndex = "9999";
      el.style.background = "white";
      el.style.display = "flex";
      el.style.flexDirection = "column";
      containerEl.style.flex = "1";

      document.getElementById("maxId").style.display = "none";
      document.getElementById("minId").style.display = "block";
    };

    // 最小化
    document.getElementById("minId").onclick = () => {
      el.style.width = "auto";
      el.style.height = "auto";
      el.style.position = "static";

      document.getElementById("maxId").style.display = "block";
      document.getElementById("minId").style.display = "none";
    };
  });
}

export function delFullscreen() {
  // 清理事件监听（可选）
  const maxBtn = document.getElementById("maxId");
  const minBtn = document.getElementById("minId");
  if (maxBtn) maxBtn.onclick = null;
  if (minBtn) minBtn.onclick = null;
}

2、VueQuill 组件页面引入

// 全屏功能注入
import { addFullscreen,delFullscreen }  from "./fullscreen.js";


onMounted(() => {
  //添加按钮和监听事件
  addFullscreen()
});

onUnmounted(() => {
//移除监听事件
  delFullscreen()
});