2 lines
3.1 KiB
JavaScript
2 lines
3.1 KiB
JavaScript
import{J as $}from"./element-a4dc66a7.js";import{r as I,s as B,c as H,z as S,H as V,ah as O,l as D,m as M,p as L,V as c,P as u,u as y,T as k,aH as T,aI as G}from"./vue-2207505e.js";import{_ as P}from"./index-97c15cdc.js";import"./vxe-51e6f8a7.js";const z={color:"#c0c4cc",opacity:.5,size:"16px",family:"serif",angle:-20,width:200,height:150},U=I(document.body);function W(s=U){let v;const t=B(null),C=e=>{const{color:a,opacity:l,size:r,family:m,angle:_,width:p,height:x}=v??z,b=document.createElement("canvas");b.width=p,b.height=x;const o=b.getContext("2d");return o&&(o.fillStyle=a,o.globalAlpha=l,o.font=r+" "+m,o.rotate(Math.PI/180*_),o.clearRect(0,0,p,x),o.fillText(e,0,x/2)),b.toDataURL()},f=()=>{!s.value||!t.value||(s.value.removeChild(t.value),t.value=null,h(s.value))},d=(e={})=>{t.value&&(e.width&&(t.value.style.width=`${e.width}px`),e.height&&(t.value.style.height=`${e.height}px`),e.text&&(t.value.style.background=`url(${C(e.text)}) left top repeat`))},g=e=>{if(!s.value)return;if(t.value){d({text:e});return}const a=document.createElement("div");t.value=a,a.style.pointerEvents="none",a.style.top="0",a.style.left="0",a.style.position="absolute",a.style.zIndex="9999";const{clientWidth:l,clientHeight:r}=s.value;d({width:l,height:r,text:e}),s.value.appendChild(a)},n=(e,a={})=>{s.value&&(s.value.style.position="relative",v={...z,...a},g(e),i(s.value),H()&&S(f))},i=e=>{e._mutationObserver||e._resizeObserver||!t.value||(w(e),R(e))},h=e=>{var a,l;(a=e._mutationObserver)==null||a.disconnect(),e._mutationObserver=void 0,(l=e._resizeObserver)==null||l.unobserve(e),e._resizeObserver=void 0},w=e=>{const a={attributes:!0,childList:!0,subtree:!0},l=m=>{m.forEach(_=>{switch(_.type){case"childList":_.removedNodes.forEach(p=>{p===t.value&&e.appendChild(t.value)});break;case"attributes":t.value.style.display==="none"?t.value.style.display="block":t.value.style.visibility==="hidden"&&(t.value.style.visibility="visible");break}})},r=new MutationObserver(l);r.observe(e,a),e._mutationObserver=r},R=e=>{const a=$(()=>{const{clientWidth:r,clientHeight:m}=e;d({width:r,height:m})},500),l=new ResizeObserver(a);l.observe(e),e._resizeObserver=l};return{setWatermark:n,clear:f}}const A=s=>(T("data-v-aa4c9b3e"),s=s(),G(),s),E={class:"app-container"},J=A(()=>L("h4",null,"该示例是演示：通过调用 hook，开启或关闭水印（支持局部、全局、自定义样式）",-1)),j=V({__name:"use-watermark",setup(s){const v=I(null),{setWatermark:t,clear:C}=W(v),{setWatermark:f,clear:d}=W();return(g,n)=>{const i=O("el-button"),h=O("el-button-group");return D(),M("div",E,[J,L("div",{ref_key:"localRef",ref:v,class:"local"},null,512),c(h,null,{default:u(()=>[c(i,{type:"primary",onClick:n[0]||(n[0]=w=>y(t)("局部水印",{color:"#409eff"}))},{default:u(()=>[k("创建局部水印")]),_:1}),c(i,{type:"danger",onClick:y(C)},{default:u(()=>[k("清除局部水印")]),_:1},8,["onClick"])]),_:1}),c(h,null,{default:u(()=>[c(i,{type:"primary",onClick:n[1]||(n[1]=w=>y(f)("全局水印"))},{default:u(()=>[k("创建全局水印")]),_:1}),c(i,{type:"danger",onClick:y(d)},{default:u(()=>[k("清除全局水印")]),_:1},8,["onClick"])]),_:1})])}}});const X=P(j,[["__scopeId","data-v-aa4c9b3e"]]);export{X as default};
|