primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 6.29 kB
JavaScript
import{ZIndexUtils as e,DomHandler as i}from"primevue/utils";import{openBlock as t,createBlock as n,createVNode as a,mergeProps as s,renderSlot as o,createCommentVNode as l,Teleport as r,Transition as c,withCtx as p}from"vue";var m={name:"Image",inheritAttrs:!1,props:{preview:{type:Boolean,default:!1},class:null,style:null,imageStyle:null,imageClass:null},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&e.clear(this.container)},methods:{maskRef(e){this.mask=e},toolbarRef(e){this.toolbarRef=e},onImageClick(){this.preview&&(this.maskVisible=!0,setTimeout((()=>{this.previewVisible=!0}),25))},onPreviewImageClick(){this.previewClick=!0},onMaskClick(){this.previewClick||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1},rotateRight(){this.rotate+=90,this.previewClick=!0},rotateLeft(){this.rotate-=90,this.previewClick=!0},zoomIn(){this.scale=this.scale+.1,this.previewClick=!0},zoomOut(){this.scale=this.scale-.1,this.previewClick=!0},onBeforeEnter(){e.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.$emit("show")},onBeforeLeave(){i.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(i){e.clear(i),this.maskVisible=!1}},computed:{containerClass(){return["p-image p-component",this.class,{"p-image-preview-container":this.preview}]},maskClass:()=>["p-image-mask p-component-overlay p-component-overlay-enter"],rotateClass(){return"p-image-preview-rotate-"+this.rotate},imagePreviewStyle(){return{transform:"rotate("+this.rotate+"deg) scale("+this.scale+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5}}};const k=a("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),b={class:"p-image-toolbar"},v=a("i",{class:"pi pi-refresh"},null,-1),d=a("i",{class:"pi pi-undo"},null,-1),h=a("i",{class:"pi pi-search-minus"},null,-1),f=a("i",{class:"pi pi-search-plus"},null,-1),g=a("i",{class:"pi pi-times"},null,-1),u={key:0};!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.p-image-preview-container {\n position: relative;\n display: inline-block;\n}\n.p-image-preview-indicator {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n opacity: 0;\n -webkit-transition: opacity .3s;\n transition: opacity .3s;\n}\n.p-image-preview-icon {\n font-size: 1.5rem;\n}\n.p-image-preview-container:hover > .p-image-preview-indicator {\n opacity: 1;\n cursor: pointer;\n}\n.p-image-preview-container > img {\n cursor: pointer;\n}\n.p-image-toolbar {\n position: absolute;\n top: 0;\n right: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.p-image-action.p-link {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.p-image-preview {\n -webkit-transition: -webkit-transform .15s;\n transition: -webkit-transform .15s;\n transition: transform .15s;\n transition: transform .15s, -webkit-transform .15s;\n max-width: 100vw;\n max-height: 100vh;\n}\n.p-image-preview-enter-active {\n -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n opacity: 0;\n -webkit-transform: scale(0.7);\n transform: scale(0.7);\n}\n"),m.render=function(e,i,m,w,y,C){return t(),n("span",{class:C.containerClass,style:m.style},[a("img",s(e.$attrs,{style:m.imageStyle,class:m.imageClass}),null,16),m.preview?(t(),n("div",{key:0,class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>C.onImageClick&&C.onImageClick(...e))},[o(e.$slots,"indicator",{},(()=>[k]))])):l("",!0),(t(),n(r,{to:"body"},[y.maskVisible?(t(),n("div",{key:0,ref:C.maskRef,class:C.maskClass,onClick:i[8]||(i[8]=(...e)=>C.onMaskClick&&C.onMaskClick(...e))},[a("div",b,[a("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>C.rotateRight&&C.rotateRight(...e)),type:"button"},[v]),a("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>C.rotateLeft&&C.rotateLeft(...e)),type:"button"},[d]),a("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>C.zoomOut&&C.zoomOut(...e)),type:"button",disabled:C.zoomDisabled},[h],8,["disabled"]),a("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>C.zoomIn&&C.zoomIn(...e)),type:"button",disabled:C.zoomDisabled},[f],8,["disabled"]),a("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i))},[g])]),a(c,{name:"p-image-preview",onBeforeEnter:C.onBeforeEnter,onEnter:C.onEnter,onLeave:C.onLeave,onBeforeLeave:C.onBeforeLeave,onAfterLeave:C.onAfterLeave},{default:p((()=>[y.previewVisible?(t(),n("div",u,[a("img",{src:e.$attrs.src,class:"p-image-preview",style:C.imagePreviewStyle,onClick:i[7]||(i[7]=(...e)=>C.onPreviewImageClick&&C.onPreviewImageClick(...e))},null,12,["src"])])):l("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],2)):l("",!0)]))],6)};export default m;