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

A vue based PC component library

"use strict";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}}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,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"],setup(l,e){const r=e["emit"];var t=_xeUtils.default.uniqueId();const s=(0,_vue.inject)("$xeImageGroup",null),n=(0,_vue.ref)(),g=(0,_ui.useSize)(l)["computeSize"];var i=(0,_vue.reactive)({});const u={refElem:n},d=(0,_vue.computed)(()=>{var{width:e,height:t}=l,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}),m=(0,_vue.computed)(()=>{var e=l["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)(()=>{return m.value[0]}),c=(0,_vue.computed)(()=>{var e=o.value;return e?""+(e.url||""):""}),v=(0,_vue.computed)(()=>{var e=l.getThumbnailUrlMethod||(0,_ui.getConfig)().image.getThumbnailUrlMethod,t=c.value;return e?e({url:t,$image:_}):""}),a={computeSize:g},_={xID:t,props:l,context:e,reactData:i,getRefMaps:()=>u,getComputeMaps:()=>a},h=e=>{var{showPreview:t,toolbarConfig:i,showPrintButton:r,showDownloadButton:u,maskClosable:o}=l,a=m.value,n=c.value;s?s.handleClickImgEvent(e,{url:n}):(t&&n&&(0,_util.openPreviewImage)({urlList:a,toolbarConfig:i,showPrintButton:r,showDownloadButton:u,maskClosable:o,events:{change(e){_.dispatchEvent("change",e,e.$event)},rotate(e){_.dispatchEvent("rotate",e,e.$event)}}}),_.dispatchEvent("click",{url:n},e))};Object.assign(_,{dispatchEvent(e,t,i){r(e,(0,_ui.createEvent)(i,{$image:_},t))}},{});return _.renderVN=()=>{var{alt:e,loading:t,circle:i}=l,r=d.value,u=c.value,o=v.value,a=g.value;return(0,_vue.h)("img",{ref:n,class:["vxe-image",{["size--"+a]:a,"is--circle":i}],src:o||u,alt:e,loading:t,style:r,onClick:h})},_},render(){return this.renderVN()}});