2 lines
2.0 KiB
JavaScript
2 lines
2.0 KiB
JavaScript
import{n as b}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(a=$){let u,m,t=null;const s={mutationObserver:void 0,resizeObserver:void 0},g=(e,r={})=>{if(!a.value){console.warn("请在 DOM 挂载完成后再调用 setWatermark 方法设置水印");return}u=e,m={...L,...r},f(),y(a.value)},k=b(()=>{v(),f(),y(a.value)},500),f=()=>{if(t){d();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}=a.value;d({width:r,height:i}),a.value.style.position="relative",a.value.appendChild(e)},d=(e={})=>{t&&(u&&(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:i,family:n,angle:c,width:h,height:O}=m,l=document.createElement("canvas");l.width=h,l.height=O;const o=l.getContext("2d");return o&&(o.fillStyle=e,o.globalAlpha=r,o.font=`${i}px ${n}`,o.rotate(Math.PI/180*c),o.fillText(u,0,O/2)),l.toDataURL()},v=()=>{!a.value||!t||(a.value.removeChild(t),t=null,w(a.value))},y=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=b(n=>{n.forEach(c=>{switch(c.type){case"childList":c.removedNodes.forEach(h=>{h===t&&e.appendChild(t)});break;case"attributes":c.target===t&&k();break}})},500);s.mutationObserver=new MutationObserver(i),s.mutationObserver.observe(e,r)},x=e=>{const r=b(()=>{const{clientWidth:i,clientHeight:n}=e;d({width:i,height:n})},500);s.resizeObserver=new ResizeObserver(r),s.resizeObserver.observe(e)};return C(()=>{v()}),{setWatermark:g,clearWatermark:v}}export{P as u};
|