You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
9.4 KiB
2 lines
9.4 KiB
import{m as ve,c as M,d as be}from"./index-82e080df.js";import{ac as Ie,k as me,G as ie,S as Q,d as ee,ad as fe,ae as pe,u as ge,af as _e,q as b,ag as ze,s as Le,e as v,x as ue,J as we,z as ye,o as y,c as ce,Q as c,w as _,M as w,n as d,a,g as de,$ as Ee,V as z,f as O,F as U,X as Ce,W as xe,D as Oe,E as Se,r as J,T as Ne,ah as Te,ai as Re,h as he,aj as $e,O as Ae,m as Ve,ak as Be,C as Me}from"./index-7ade0fa6.js";import{D as B,G as De,H as Xe,E as N,f as Ye,e as Fe,c as He,I as Pe,J as We,K as je,L as Ke,_ as ke,M as Ge}from"./el-button-98327865.js";import{d as Ze,E as V,g as qe}from"./el-scrollbar-7a0c56b8.js";const Je=(r,f)=>{if(!B||!r||!f)return!1;const o=r.getBoundingClientRect();let s;return f instanceof Element?s=f.getBoundingClientRect():s={top:0,right:window.innerWidth,bottom:window.innerHeight,left:0},o.top<s.bottom&&o.bottom>s.top&&o.right>s.left&&o.left<s.right};var Qe="Expected a function";function re(r,f,o){var s=!0,h=!0;if(typeof r!="function")throw new TypeError(Qe);return Ie(o)&&(s="leading"in o?!!o.leading:s,h="trailing"in o?!!o.trailing:h),Ze(r,f,{leading:s,maxWait:f,trailing:h})}const Ue=me({urlList:{type:ie(Array),default:()=>ve([])},zIndex:{type:Number},initialIndex:{type:Number,default:0},infinite:{type:Boolean,default:!0},hideOnClickModal:Boolean,teleported:Boolean,closeOnPressEscape:{type:Boolean,default:!0},zoomRate:{type:Number,default:1.2}}),et={close:()=>!0,switch:r=>Q(r),rotate:r=>Q(r)},tt=["src"],at=ee({name:"ElImageViewer"}),nt=ee({...at,props:Ue,emits:et,setup(r,{expose:f,emit:o}){const s=r,h={CONTAIN:{name:"contain",icon:fe(De)},ORIGINAL:{name:"original",icon:fe(Xe)}},{t:L}=pe(),i=ge("image-viewer"),{nextZIndex:te}=_e(),T=b(),S=b([]),E=ze(),I=b(!0),m=b(s.initialIndex),p=Le(h.CONTAIN),u=b({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),D=v(()=>{const{urlList:e}=s;return e.length<=1}),$=v(()=>m.value===0),H=v(()=>m.value===s.urlList.length-1),ae=v(()=>s.urlList[m.value]),ne=v(()=>[i.e("btn"),i.e("prev"),i.is("disabled",!s.infinite&&$.value)]),X=v(()=>[i.e("btn"),i.e("next"),i.is("disabled",!s.infinite&&H.value)]),se=v(()=>{const{scale:e,deg:n,offsetX:l,offsetY:g,enableTransition:C}=u.value;let k=l/e,x=g/e;switch(n%360){case 90:case-270:[k,x]=[x,-k];break;case 180:case-180:[k,x]=[-k,-x];break;case 270:case-90:[k,x]=[-x,k];break}const A={transform:`scale(${e}) rotate(${n}deg) translate(${k}px, ${x}px)`,transition:C?"transform .3s":""};return p.value.name===h.CONTAIN.name&&(A.maxWidth=A.maxHeight="100%"),A}),P=v(()=>Q(s.zIndex)?s.zIndex:te());function R(){le(),o("close")}function oe(){const e=re(l=>{switch(l.code){case V.esc:s.closeOnPressEscape&&R();break;case V.space:G();break;case V.left:Z();break;case V.up:t("zoomIn");break;case V.right:q();break;case V.down:t("zoomOut");break}}),n=re(l=>{const g=l.deltaY||l.deltaX;t(g<0?"zoomIn":"zoomOut",{zoomRate:s.zoomRate,enableTransition:!1})});E.run(()=>{M(document,"keydown",e),M(document,"wheel",n)})}function le(){E.stop()}function W(){I.value=!1}function j(e){I.value=!1,e.target.alt=L("el.image.error")}function K(e){if(I.value||e.button!==0||!T.value)return;u.value.enableTransition=!1;const{offsetX:n,offsetY:l}=u.value,g=e.pageX,C=e.pageY,k=re(A=>{u.value={...u.value,offsetX:n+A.pageX-g,offsetY:l+A.pageY-C}}),x=M(document,"mousemove",k);M(document,"mouseup",()=>{x()}),e.preventDefault()}function Y(){u.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function G(){if(I.value)return;const e=Re(h),n=Object.values(h),l=p.value.name,C=(n.findIndex(k=>k.name===l)+1)%e.length;p.value=h[e[C]],Y()}function F(e){const n=s.urlList.length;m.value=(e+n)%n}function Z(){$.value&&!s.infinite||F(m.value-1)}function q(){H.value&&!s.infinite||F(m.value+1)}function t(e,n={}){if(I.value)return;const{zoomRate:l,rotateDeg:g,enableTransition:C}={zoomRate:s.zoomRate,rotateDeg:90,enableTransition:!0,...n};switch(e){case"zoomOut":u.value.scale>.2&&(u.value.scale=Number.parseFloat((u.value.scale/l).toFixed(3)));break;case"zoomIn":u.value.scale<7&&(u.value.scale=Number.parseFloat((u.value.scale*l).toFixed(3)));break;case"clockwise":u.value.deg+=g,o("rotate",u.value.deg);break;case"anticlockwise":u.value.deg-=g,o("rotate",u.value.deg);break}u.value.enableTransition=C}return ue(ae,()=>{we(()=>{const e=S.value[0];e!=null&&e.complete||(I.value=!0)})}),ue(m,e=>{Y(),o("switch",e)}),ye(()=>{var e,n;oe(),(n=(e=T.value)==null?void 0:e.focus)==null||n.call(e)}),f({setActiveItem:F}),(e,n)=>(y(),ce(Te,{to:"body",disabled:!e.teleported},[c(Ne,{name:"viewer-fade",appear:""},{default:_(()=>[w("div",{ref_key:"wrapper",ref:T,tabindex:-1,class:d(a(i).e("wrapper")),style:de({zIndex:a(P)})},[w("div",{class:d(a(i).e("mask")),onClick:n[0]||(n[0]=Ee(l=>e.hideOnClickModal&&R(),["self"]))},null,2),z(" CLOSE "),w("span",{class:d([a(i).e("btn"),a(i).e("close")]),onClick:R},[c(a(N),null,{default:_(()=>[c(a(Ye))]),_:1})],2),z(" ARROW "),a(D)?z("v-if",!0):(y(),O(U,{key:0},[w("span",{class:d(a(ne)),onClick:Z},[c(a(N),null,{default:_(()=>[c(a(Fe))]),_:1})],2),w("span",{class:d(a(X)),onClick:q},[c(a(N),null,{default:_(()=>[c(a(He))]),_:1})],2)],64)),z(" ACTIONS "),w("div",{class:d([a(i).e("btn"),a(i).e("actions")])},[w("div",{class:d(a(i).e("actions__inner"))},[c(a(N),{onClick:n[1]||(n[1]=l=>t("zoomOut"))},{default:_(()=>[c(a(Pe))]),_:1}),c(a(N),{onClick:n[2]||(n[2]=l=>t("zoomIn"))},{default:_(()=>[c(a(We))]),_:1}),w("i",{class:d(a(i).e("actions__divider"))},null,2),c(a(N),{onClick:G},{default:_(()=>[(y(),ce(Ce(a(p).icon)))]),_:1}),w("i",{class:d(a(i).e("actions__divider"))},null,2),c(a(N),{onClick:n[3]||(n[3]=l=>t("anticlockwise"))},{default:_(()=>[c(a(je))]),_:1}),c(a(N),{onClick:n[4]||(n[4]=l=>t("clockwise"))},{default:_(()=>[c(a(Ke))]),_:1})],2)],2),z(" CANVAS "),w("div",{class:d(a(i).e("canvas"))},[(y(!0),O(U,null,xe(e.urlList,(l,g)=>Oe((y(),O("img",{ref_for:!0,ref:C=>S.value[g]=C,key:l,src:l,style:de(a(se)),class:d(a(i).e("img")),onLoad:W,onError:j,onMousedown:K},null,46,tt)),[[Se,g===m.value]])),128))],2),J(e.$slots,"default")],6)]),_:3})],8,["disabled"]))}});var st=ke(nt,[["__file","/home/runner/work/element-plus/element-plus/packages/components/image-viewer/src/image-viewer.vue"]]);const ot=he(st),lt=me({hideOnClickModal:Boolean,src:{type:String,default:""},fit:{type:String,values:["","contain","cover","fill","none","scale-down"],default:""},loading:{type:String,values:["eager","lazy"]},lazy:Boolean,scrollContainer:{type:ie([String,Object])},previewSrcList:{type:ie(Array),default:()=>ve([])},previewTeleported:Boolean,zIndex:{type:Number},initialIndex:{type:Number,default:0},infinite:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},zoomRate:{type:Number,default:1.2}}),rt={load:r=>r instanceof Event,error:r=>r instanceof Event,switch:r=>Q(r),close:()=>!0,show:()=>!0},it=["src","loading"],ut={key:0},ct=ee({name:"ElImage",inheritAttrs:!1}),dt=ee({...ct,props:lt,emits:rt,setup(r,{emit:f}){const o=r;let s="";const{t:h}=pe(),L=ge("image"),i=$e(),te=be(),T=b(),S=b(!1),E=b(!0),I=b(!1),m=b(),p=b(),u=B&&"loading"in HTMLImageElement.prototype;let D,$;const H=v(()=>[L.e("inner"),X.value&&L.e("preview"),E.value&&L.is("loading")]),ae=v(()=>i.style),ne=v(()=>{const{fit:t}=o;return B&&t?{objectFit:t}:{}}),X=v(()=>{const{previewSrcList:t}=o;return Array.isArray(t)&&t.length>0}),se=v(()=>{const{previewSrcList:t,initialIndex:e}=o;let n=e;return e>t.length-1&&(n=0),n}),P=v(()=>o.loading==="eager"?!1:!u&&o.loading==="lazy"||o.lazy),R=()=>{B&&(E.value=!0,S.value=!1,T.value=o.src)};function oe(t){E.value=!1,S.value=!1,f("load",t)}function le(t){E.value=!1,S.value=!0,f("error",t)}function W(){Je(m.value,p.value)&&(R(),Y())}const j=Ge(W,200,!0);async function K(){var t;if(!B)return;await we();const{scrollContainer:e}=o;Be(e)?p.value=e:Me(e)&&e!==""?p.value=(t=document.querySelector(e))!=null?t:void 0:m.value&&(p.value=qe(m.value)),p.value&&(D=M(p,"scroll",j),setTimeout(()=>W(),100))}function Y(){!B||!p.value||!j||(D==null||D(),p.value=void 0)}function G(t){if(t.ctrlKey){if(t.deltaY<0)return t.preventDefault(),!1;if(t.deltaY>0)return t.preventDefault(),!1}}function F(){X.value&&($=M("wheel",G,{passive:!1}),s=document.body.style.overflow,document.body.style.overflow="hidden",I.value=!0,f("show"))}function Z(){$==null||$(),document.body.style.overflow=s,I.value=!1,f("close")}function q(t){f("switch",t)}return ue(()=>o.src,()=>{P.value?(E.value=!0,S.value=!1,Y(),K()):R()}),ye(()=>{P.value?K():R()}),(t,e)=>(y(),O("div",{ref_key:"container",ref:m,class:d([a(L).b(),t.$attrs.class]),style:de(a(ae))},[S.value?J(t.$slots,"error",{key:0},()=>[w("div",{class:d(a(L).e("error"))},Ae(a(h)("el.image.error")),3)]):(y(),O(U,{key:1},[T.value!==void 0?(y(),O("img",Ve({key:0},a(te),{src:T.value,loading:t.loading,style:a(ne),class:a(H),onClick:F,onLoad:oe,onError:le}),null,16,it)):z("v-if",!0),E.value?(y(),O("div",{key:1,class:d(a(L).e("wrapper"))},[J(t.$slots,"placeholder",{},()=>[w("div",{class:d(a(L).e("placeholder"))},null,2)])],2)):z("v-if",!0)],64)),a(X)?(y(),O(U,{key:2},[I.value?(y(),ce(a(ot),{key:0,"z-index":t.zIndex,"initial-index":a(se),infinite:t.infinite,"zoom-rate":t.zoomRate,"url-list":t.previewSrcList,"hide-on-click-modal":t.hideOnClickModal,teleported:t.previewTeleported,"close-on-press-escape":t.closeOnPressEscape,onClose:Z,onSwitch:q},{default:_(()=>[t.$slots.viewer?(y(),O("div",ut,[J(t.$slots,"viewer")])):z("v-if",!0)]),_:3},8,["z-index","initial-index","infinite","zoom-rate","url-list","hide-on-click-modal","teleported","close-on-press-escape"])):z("v-if",!0)],64)):z("v-if",!0)],6))}});var ft=ke(dt,[["__file","/home/runner/work/element-plus/element-plus/packages/components/image/src/image.vue"]]);const wt=he(ft);export{wt as E};
|