t-fighting-design/lib/watermark/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("./index3.js"),c=require("../../_utils/index6.js"),d=require("../../_hooks/use-filter-props/index.js");require("../../_hooks/use-message/index.js");require("../../loading-bar/src/index2.js");const m=e.defineComponent({name:"FWatermark"}),k=e.defineComponent({...m,props:l.Props,setup(a){const t=a,n=e.ref(null),s=()=>{const r=d.useFilterProps(t,["content","width","height","fontSize","fontColor"]);return{backgroundImage:`url(${c.createWatermark(r)})`}},i=()=>{const{image:r,width:o,height:u}=t;return{backgroundImage:`url(${r})`,backgroundSize:`${o}px ${u}px`}};return e.onMounted(()=>{n.value=t.image?i():s()}),(r,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["f-watermark",{"f-watermark__block":r.block}]),style:e.normalizeStyle([n.value,{zIndex:r.zIndex}])},[e.renderSlot(r.$slots,"default")],6))}});exports.default=k;