vxe-pc-ui/lib/watermark/src/watermark.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_util=require("./util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeWatermark",props:{width:String,height:String,imageUrl:String,rotate:{type:[Number,String],default:()=>(0,_ui.getConfig)().watermark.rotate},gap:{type:[Array,Number,String],default:()=>_xeUtils.default.clone((0,_ui.getConfig)().watermark.gap,!0)},content:[String,Array],font:Object,offset:Object,zIndex:[String,Number]},emits:[],setup(n,e){const a=e["emit"];var t=_xeUtils.default.uniqueId();const o=(0,_vue.ref)(),l=(0,_vue.reactive)({markUrl:""}),r={refElem:o},s=(0,_vue.computed)(()=>_xeUtils.default.assign({},_xeUtils.default.clone((0,_ui.getConfig)().watermark.font,!0),n.font)),u=(0,_vue.computed)(()=>{var{width:e,height:t,zIndex:r}=n,a=l["markUrl"],u={};return e&&(u.width=(0,_dom.toCssUnit)(e)),t&&(u.height=(0,_dom.toCssUnit)(t)),a&&(u.backgroundImage=`url(${a})`),r&&(u.zIndex=r),u}),i={},_={xID:t,props:n,context:e,reactData:l,getRefMaps:()=>r,getComputeMaps:()=>i};const d=()=>{var{content:e,gap:t,rotate:r,offset:a}=n,u=o.value,i=s.value;u&&e&&(0,_util.getContentUrl)(e,getComputedStyle(u).fontSize,{font:i,rotate:r,gap:t,offset:a}).then(e=>{l.markUrl=e})};Object.assign(_,{dispatchEvent:(e,t,r)=>{a(e,(0,_ui.createEvent)(r,{$watermark:_},t))}},{});return(0,_vue.watch)(()=>n.imageUrl,()=>{d()}),(0,_vue.watch)(()=>n.content,()=>{d()}),(0,_vue.watch)(()=>n.gap,()=>{d()}),(0,_vue.watch)(()=>n.rotate,()=>{d()}),(0,_vue.watch)(()=>n.width,()=>{d()}),(0,_vue.watch)(()=>n.height,()=>{d()}),(0,_vue.watch)(()=>n.font,()=>{d()}),(0,_vue.onMounted)(()=>{d(),_ui.globalEvents.on(_,"resize",_xeUtils.default.throttle(()=>{d()},300,{trailing:!0,leading:!0}))}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(_,"resize")}),_.renderVN=()=>{var e=u.value;return(0,_vue.h)("div",{ref:o,class:"vxe-watermark",style:e})},_},render(){return this.renderVN()}});