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