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

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_dom=require("../../ui/src/dom"),_util=require("./util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeImage",props:{src:[String,Array],alt:[String,Number],loading:String,title:[String,Number],width:[String,Number],height:[String,Number],minWidth:[String,Number],minHeight:[String,Number],maxWidth:[String,Number],maxHeight:[String,Number],circle:Boolean,draggable:{type:Boolean,default:()=>(0,_ui.getConfig)().image.draggable},zIndex:Number,maskClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().image.maskClosable},toolbarConfig:Object,showPreview:{type:Boolean,default:()=>(0,_ui.getConfig)().image.showPreview},showPrintButton:{type:Boolean,default:()=>(0,_ui.getConfig)().image.showPrintButton},showDownloadButton:{type:Boolean,default:()=>(0,_ui.getConfig)().image.showDownloadButton},size:{type:String,default:()=>(0,_ui.getConfig)().image.size||(0,_ui.getConfig)().size},getThumbnailUrlMethod:Function},emits:["click","change","rotate","dragstart","drag","dragend"],setup(g,e){let a=e.emit;var t=_xeUtils.default.uniqueId();let s=(0,_vue.inject)("$xeImageGroup",null),d=(0,_vue.ref)(),m=(0,_ui.useSize)(g).computeSize,h=createInternalData(),i=(0,_vue.reactive)(createReactData()),r={refElem:d},c=(0,_vue.computed)(()=>{var{width:e,height:t,minWidth:i,minHeight:a,maxWidth:r,maxHeight:o,circle:n}=g,u={};return i&&(u.minWidth=(0,_dom.toCssUnit)(i)),a&&(u.minHeight=(0,_dom.toCssUnit)(a)),r&&(u.maxWidth=(0,_dom.toCssUnit)(r)),o&&(u.maxHeight=(0,_dom.toCssUnit)(o)),n?e?(u.width=(0,_dom.toCssUnit)(e),u.height=(0,_dom.toCssUnit)(e)):t&&(u.width=(0,_dom.toCssUnit)(t),u.height=(0,_dom.toCssUnit)(t)):(e&&(u.width=(0,_dom.toCssUnit)(e)),t&&(u.height=(0,_dom.toCssUnit)(t))),u}),_=(0,_vue.computed)(()=>{var{width:e,height:t}=g,i={};return e&&t?(i.maxWidth=(0,_dom.toCssUnit)(e),i.maxHeight=(0,_dom.toCssUnit)(t)):(e&&(i.width=(0,_dom.toCssUnit)(e)),t&&(i.height=(0,_dom.toCssUnit)(t))),i}),v=(0,_vue.computed)(()=>{var e=g.src;return e?(_xeUtils.default.isArray(e)?e:[e]).map(e=>_xeUtils.default.isString(e)?{url:e,alt:""}:{url:e.url,alt:e.alt}):[]}),o=(0,_vue.computed)(()=>v.value[0]),f=(0,_vue.computed)(()=>{var e=o.value;return e?""+(e.url||""):""}),p=(0,_vue.computed)(()=>{var e=g.getThumbnailUrlMethod||(0,_ui.getConfig)().image.getThumbnailUrlMethod,t=f.value;return e?e({url:t,$image:u}):""}),n={computeSize:m},u={xID:t,props:g,context:e,reactData:i,internalData:h,getRefMaps:()=>r,getComputeMaps:()=>n},C=(e,t,i)=>{a(e,(0,_ui.createEvent)(i,{$image:u},t))};t={dispatchEvent:C};let w=e=>{var{showPreview:t,toolbarConfig:i,showPrintButton:a,showDownloadButton:r,maskClosable:o,zIndex:n}=g,{mdTime:u,dgTime:l}=h;u&&l&&u<l||(u=v.value,l=f.value,s?s.handleClickImgEvent(e,{url:l}):(t&&l&&(0,_util.openPreviewImage)({urlList:u,toolbarConfig:i,showPrintButton:a,showDownloadButton:r,maskClosable:o,zIndex:n,events:{change(e){C("change",e,e.$event)},rotate(e){C("rotate",e,e.$event)}}}),C("click",{url:l},e)))},x=()=>{h.mdTime=Date.now()},b=e=>{h.dgTime=Date.now(),C("dragstart",{},e)},U=e=>{C(e.type,{},e)};Object.assign(u,t,{});return(0,_vue.onBeforeUnmount)(()=>{_xeUtils.default.assign(i,createReactData()),_xeUtils.default.assign(h,createInternalData())}),u.renderVN=()=>{var{alt:e,loading:t,circle:i,draggable:a}=g,r=c.value,o=_.value,n=f.value,u=p.value,l=m.value;let s;return _xeUtils.default.eqNull(a)||(s=!(!0!==a&&"true"!==a)),(0,_vue.h)("div",{class:["vxe-image",{["size--"+l]:l,"is--circle":i}],style:r},[(0,_vue.h)("img",{ref:d,class:"vxe-image-img",src:u||n,alt:e,loading:t,draggable:s,style:o,onMousedown:x,onClick:w,onDragstart:b,onDrag:U,onDragend:U})])},u},render(){return this.renderVN()}});