2 lines
1.9 KiB
JavaScript
2 lines
1.9 KiB
JavaScript
import{n as b}from"./element-4018b73c.js";import{r as W,z as g}from"./vue-2207505e.js";const C={color:"#c0c4cc",opacity:.5,size:16,family:"serif",angle:-20,width:300,height:200},_=W(document.body);function E(i=_){let h,m,t=null;const O=(e,r={})=>{if(!i.value){console.warn("请在 DOM 挂载完成后再调用 setWatermark 方法设置水印");return}h=e,m={...C,...r},f(),y(i.value)},k=b(()=>{d(),f(),y(i.value)},500),f=()=>{if(t){v();return}const e=document.createElement("div");e.style.pointerEvents="none",e.style.top="0",e.style.left="0",e.style.position="absolute",e.style.zIndex="99999",t=e;const{clientWidth:r,clientHeight:s}=i.value;v({width:r,height:s}),i.value.style.position="relative",i.value.appendChild(e)},v=(e={})=>{t&&(h&&(t.style.background=`url(${p()}) left top repeat`),e.width&&(t.style.width=`${e.width}px`),e.height&&(t.style.height=`${e.height}px`))},p=()=>{const{color:e,opacity:r,size:s,family:n,angle:o,width:c,height:l}=m,u=document.createElement("canvas");u.width=c,u.height=l;const a=u.getContext("2d");return a&&(a.fillStyle=e,a.globalAlpha=r,a.font=`${s}px ${n}`,a.rotate(Math.PI/180*o),a.fillText(h,0,l/2)),u.toDataURL()},d=()=>{!i.value||!t||(i.value.removeChild(t),t=null,w(i.value))},y=e=>{e._mutationObserver||e._resizeObserver||(z(e),x(e))},w=e=>{var r,s;(r=e._mutationObserver)==null||r.disconnect(),e._mutationObserver=void 0,(s=e._resizeObserver)==null||s.unobserve(e),e._resizeObserver=void 0},z=e=>{const r={attributes:!0,childList:!0,subtree:!0},s=b(o=>{o.forEach(c=>{switch(c.type){case"childList":c.removedNodes.forEach(l=>{l===t&&e.appendChild(t)});break;case"attributes":c.target===t&&k();break}})},500),n=new MutationObserver(s);n.observe(e,r),e._mutationObserver=n},x=e=>{const r=b(()=>{const{clientWidth:n,clientHeight:o}=e;v({width:n,height:o})},500),s=new ResizeObserver(r);s.observe(e),e._resizeObserver=s};return g(()=>{d()}),{setWatermark:O,clearWatermark:d}}export{E as u};
|