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],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 i=e.emit;var t=_xeUtils.default.uniqueId();let s=(0,_vue.inject)("$xeImageGroup",null),d=(0,_vue.ref)(),m=(0,_ui.useSize)(g).computeSize,c=createInternalData(),a=(0,_vue.reactive)(createReactData()),r={refElem:d},_=(0,_vue.computed)(()=>{var{width:e,height:t,circle:a}=g,i={};return e?i.width=(0,_dom.toCssUnit)(e):a&&t&&(i.width=(0,_dom.toCssUnit)(t)),t?i.height=(0,_dom.toCssUnit)(t):a&&e&&(i.height=(0,_dom.toCssUnit)(e)),i}),v=(0,_vue.computed)(()=>{var{width:e,height:t}=g,a={};return e&&t?(a.maxWidth=(0,_dom.toCssUnit)(e),a.maxHeight=(0,_dom.toCssUnit)(t)):(e&&(a.width=(0,_dom.toCssUnit)(e)),t&&(a.height=(0,_dom.toCssUnit)(t))),a}),h=(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)(()=>h.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:n}):""}),u={computeSize:m},n={xID:t,props:g,context:e,reactData:a,internalData:c,getRefMaps:()=>r,getComputeMaps:()=>u},w=(e,t,a)=>{i(e,(0,_ui.createEvent)(a,{$image:n},t))};t={dispatchEvent:w};let C=e=>{var{showPreview:t,toolbarConfig:a,showPrintButton:i,showDownloadButton:r,maskClosable:o,zIndex:u}=g,{mdTime:n,dgTime:l}=c;n&&l&&n<l||(n=h.value,l=f.value,s?s.handleClickImgEvent(e,{url:l}):(t&&l&&(0,_util.openPreviewImage)({urlList:n,toolbarConfig:a,showPrintButton:i,showDownloadButton:r,maskClosable:o,zIndex:u,events:{change(e){w("change",e,e.$event)},rotate(e){w("rotate",e,e.$event)}}}),w("click",{url:l},e)))},x=()=>{c.mdTime=Date.now()},b=e=>{c.dgTime=Date.now(),w("dragstart",{},e)},D=e=>{w(e.type,{},e)};Object.assign(n,t,{});return(0,_vue.onBeforeUnmount)(()=>{_xeUtils.default.assign(a,createReactData()),_xeUtils.default.assign(c,createInternalData())}),n.renderVN=()=>{var{alt:e,loading:t,circle:a,draggable:i}=g,r=_.value,o=v.value,u=f.value,n=p.value,l=m.value;let s;return _xeUtils.default.eqNull(i)||(s=!(!0!==i&&"true"!==i)),(0,_vue.h)("div",{class:["vxe-image",{["size--"+l]:l,"is--circle":a}],style:r},[(0,_vue.h)("img",{ref:d,class:"vxe-image-img",src:n||u,alt:e,loading:t,draggable:s,style:o,onMousedown:x,onClick:C,onDragstart:b,onDrag:D,onDragend:D})])},n},render(){return this.renderVN()}});