vue-watermarker/dist/index.js

Cover the watermark on your website, which cannot be deleted or tampered with!

var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,r)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,__spreadValues=(e,t)=>{for(var r in t||(t={}))__hasOwnProp.call(t,r)&&__defNormalProp(e,r,t[r]);if(__getOwnPropSymbols)for(var r of __getOwnPropSymbols(t))__propIsEnum.call(t,r)&&__defNormalProp(e,r,t[r]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t)),__vite_style__=document.createElement("style");__vite_style__.innerHTML="#vue-water-marker{padding-top:20px;padding-left:25px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;pointer-events:none;user-select:none;z-index:19999}#vue-water-marker .vue-water-marker-item{padding:0 20px;transform:rotate(-45deg);pointer-events:none;user-select:none}\n",document.head.appendChild(__vite_style__),function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VueWaterMarker=t(e.Vue)}(this,(function(e){"use strict";var t=()=>{self.addEventListener("message",(function(e){const{type:t,during:r=5e3}=e.data;let n;"clear"!==t?n=setTimeout((()=>{self.postMessage(t)}),r):(clearTimeout(n),self.close())}),!1)},r=e.defineComponent({name:"WaterMarker",props:{refresh:{default:5e3,type:Number}},setup(r){const n=e.ref(0),o=e.ref(!0),l=e.ref([]),a=e.ref(0),s=e.ref(0),u=e.ref({}),i=e.ref(!0);let p;const c=()=>{const n=new Blob(["("+t.toString()+")()"]),l=window.URL.createObjectURL(n);p=new Worker(l),p.postMessage({during:r.refresh||5e3}),p.onmessage=async({data:t})=>{"clear"!==t?(i.value=!1,await e.nextTick(),i.value=!0,o.value&&(null==p||p.postMessage({}))):null==p||p.terminate()}};o.value&&c(),e.onBeforeUnmount((()=>{null==p||p.postMessage({type:"clear"}),p=null,i.value=!0}));const d=e.computed((()=>__spreadProps(__spreadValues({fontSize:"15px",color:"#adadad",opacity:.2,textAlign:"center"},u.value),{width:a.value+"px",height:s.value+"px"})));return e.watch((()=>o.value),(e=>{e?(i.value=!0,p?p.postMessage({during:r.refresh||5e3}):c()):(null==p||p.postMessage({type:"clear"}),p=null,i.value=!1)})),{visible:o,content:l,styleOption:u,width:a,height:s,style:d,markerNumber:n,reset:i}}});const n=["innerHTML"];r.render=function(t,r,o,l,a,s){return t.visible&&t.reset?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.markerNumber,(r=>(e.openBlock(),e.createElementBlock("div",{key:r,class:"vue-water-marker-item",style:e.normalizeStyle(t.style)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.content,((t,r)=>(e.openBlock(),e.createElementBlock("p",{key:r,innerHTML:t},null,8,n)))),128))],4)))),128)):e.createCommentVNode("",!0)};return e.defineComponent({props:{visible:{default:!0,type:Boolean},content:{default:()=>[],type:Array},styleOption:{default:()=>({}),type:Object},width:{type:Number,default:220},height:{type:Number,default:220},refresh:{default:5e3,type:Number},target:{default:void 0,type:[String,Object]}},setup(t){const{visible:n,content:o,styleOption:l,refresh:a,target:s,width:u,height:i}=e.toRefs(t);let p,c,d,f=document.body;const m=()=>{c&&(c.visible=n.value,c.content=o.value,c.styleOption=l.value,c.width=u.value,c.height=i.value,c.markerNumber=Math.ceil(screen.width/i.value)*Math.ceil(screen.height/u.value))},v=()=>{const t=document.createElement("div");t.id="vue-water-marker",p=e.createApp(r,{refresh:a.value}),c=p.mount(t),m(),null==f||f.appendChild(t)};e.watch([()=>o.value,()=>l.value,()=>u.value,()=>i.value],(()=>{m()})),e.watch((()=>n.value),(()=>{c&&(c.visible=n.value),n.value?v():(()=>{var e;null==d||d.disconnect(),null==p||p.unmount(),c=null;const t=document.querySelector("#vue-water-marker");t&&(null==(e=null==t?void 0:t.parentNode)||e.removeChild(t))})()})),e.onMounted((async()=>{await e.nextTick(),"string"==typeof s.value?f=document.querySelector(s.value):"object"==typeof s.value&&(f=s.value),document.querySelector("#vue-water-marker")||((()=>{d||(d=new MutationObserver((async function(e){for(const t of e){const e=t.removedNodes;if((null==e?void 0:e.length)>0)for(const t of Array.from(e))t&&"vue-water-marker"===(null==t?void 0:t.getAttribute("id"))&&(null==p||p.unmount(),c=null,v())}})));d.observe(f,{childList:!0})})(),v())}))},render:()=>null})}));