uv-ui/lib/components/water-mark/water-mark.cjs

基于vue3的移动端组件库

"use strict";const e=require("vue");require("./water-mark.vue_vue_type_style_index_0_lang.cjs");const f=["viewBox"],w=["href","xlink:href","width","height"],v=["width","height"],y={name:"UvWaterMark"},k=Object.assign(y,{props:{width:{type:Number,default:100},height:{type:Number,default:100},rotate:{type:Number,default:-22},image:{type:String},textColor:{type:String,default:"#dcdee0"},content:{type:String},full:{type:Boolean,default:!1},gapX:{type:Number,default:0},gapY:{type:Number,default:0},opacity:{type:Number,default:.3}},setup(a){const t=a,o=e.ref(""),i=e.ref(""),g={transformOrigin:"center",transform:`rotate(${t.rotate}deg)`},u=t.width+t.gapX,h=t.height+t.gapY,m=n=>{const l=document.createElement("canvas"),r=new Image;r.crossOrigin="anonymous",r.referrerPolicy="no-referrer",r.onload=()=>{l.width=r.naturalWidth,l.height=r.naturalHeight;const s=l.getContext("2d");s==null||s.drawImage(r,0,0),o.value=l.toDataURL()},r.src=n},d=n=>{const l=new Blob([n],{type:"image/svg+xml"});return URL.createObjectURL(l)};e.watchEffect(()=>{t.image&&m(t.image)});const c=e.ref(null);return e.watch(()=>[o.value,t.content,t.textColor,t.height,t.width,t.rotate,t.gapX,t.gapY],()=>{e.nextTick(()=>{c.value&&(i.value&&URL.revokeObjectURL(i.value),i.value=d(c.value.innerHTML))})},{immediate:!0}),(n,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["uv-water-mark",a.full?"uv-water-mark-full":""]),style:e.normalizeStyle({backgroundImage:`url(${i.value})`})},[e.createElementVNode("div",{class:"uv-water-mark-warp",ref_key:"svgElRef",ref:c},[(e.openBlock(),e.createElementBlock("svg",{viewBox:`0 0 ${u} ${h}`,width:u,height:h,xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",style:e.normalizeStyle({padding:`0 ${a.gapX}px ${a.gapY}px 0`,opacity:a.opacity})},[a.image?(e.openBlock(),e.createElementBlock("image",{key:0,href:o.value,"xlink:href":o.value,x:"0",y:"0",width:a.width,height:a.height,style:g},null,8,w)):(e.openBlock(),e.createElementBlock("foreignObject",{key:1,x:"0",y:"0",width:a.width,height:a.height},[e.createElementVNode("div",{xmlns:"http://www.w3.org/1999/xhtml",style:g},[e.renderSlot(n.$slots,"default",{},()=>[e.createElementVNode("span",{style:e.normalizeStyle({color:a.textColor})},e.toDisplayString(a.content),5)])])],8,v))],12,f))],512)],6))}});module.exports=k;