watermark-vue3
Version:
A lightweight Vue3 component for adding custom watermarks to web pages.
2 lines (1 loc) • 1.39 kB
JavaScript
(function(e,n){typeof exports=="object"&&typeof module!="undefined"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis!="undefined"?globalThis:e||self,e["watermark-vue3"]=n(e.Vue))})(this,function(e){"use strict";const n=e.defineComponent({__name:"index",props:{options:{},visible:{type:Boolean}},setup(l){const c=l,u={text:"\u6211\u662F\u6C34\u5370",fontSize:14,fontFamily:"Microsoft YaHei",color:"rgba(0, 0, 0, 0.3)",rotate:-30,opacity:.5,width:200,height:100},t=e.ref(null),d={position:"absolute",top:0,left:0,right:0,bottom:0,"pointer-events":"none"};return e.watch(()=>c.visible,i=>{t.value.style.display=i?"block":"none"}),e.onMounted(()=>{let i;i={...u,...c.options};const{text:a,fontSize:m,fontFamily:y,color:h,rotate:x,opacity:v,width:f,height:s}=i,r=document.createElement("canvas");r.width=f,r.height=s;const o=r.getContext("2d");o.font=`${m}px ${y}`,o.fillStyle=h,o.rotate(x*Math.PI/180),o.textAlign="center",Array.isArray(a)?a.forEach((g,k)=>{o.fillText(g,f/2,s+16*k)}):o.fillText(a,0,s),t.value.style.backgroundImage=`url(${r.toDataURL()})`,t.value.style.opacity=String(v)}),e.onBeforeUnmount(()=>{t.value&&t.value.remove()}),(i,a)=>(e.openBlock(),e.createElementBlock("div",{class:"watermark-container",style:d,ref_key:"wrapperRef",ref:t},null,512))}});var p={install:l=>{l.component("Watermark",n)}};return p});