1 |
- var j=(g,P,f)=>new Promise((D,x)=>{var O=o=>{try{_(f.next(o))}catch(h){x(h)}},W=o=>{try{_(f.throw(o))}catch(h){x(h)}},_=o=>o.done?D(o.value):Promise.resolve(o.value).then(O,W);_((f=f.apply(g,P)).next())});import{d as G,bc as q,aG as ge,W as pe,A as $,aE as fe,_ as z,y as I,o as k,l as H,e as a,w as C,ai as ve,N as _e,O as he,c as J,aq as Le,P as K,ap as we,X as Ie,f as xe,r as Q,a6 as ye,u as v,ak as be,b as V,by as Se,bz as $e,cO as ke,cP as Ce,__tla as Pe}from"./index-b5895273.js";import{P as De,__tla as Oe}from"./index-3705f1a8.js";import{__tla as We}from"./onMountedOrActivated-6125a24a.js";import{__tla as Ne}from"./useWindowSizeFn-a59bee15.js";import{__tla as Ae}from"./useContentViewHeight-cd147d02.js";let Z,Ee=Promise.all([(()=>{try{return Pe}catch(g){}})(),(()=>{try{return Oe}catch(g){}})(),(()=>{try{return We}catch(g){}})(),(()=>{try{return Ne}catch(g){}})(),(()=>{try{return Ae}catch(g){}})()]).then(()=>j(void 0,null,function*(){const g=G({name:"ImagePreview",components:{Image:q,PreviewGroup:q.PreviewGroup},props:{functional:ge.bool,imageList:{type:Array}},setup(s){const{prefixCls:m}=pe("image-preview"),u=$(()=>{const{imageList:r}=s;return r?r.map(t=>fe(t)?{src:t,placeholder:!1}:t):[]});return{prefixCls:m,getImageList:u}}});function P(s,m,u,r,t,y){const p=I("Image"),L=I("PreviewGroup");return k(),H("div",{class:Ie(s.prefixCls)},[a(L,null,{default:C(()=>[!s.imageList||s.$slots.default?ve(s.$slots,"default",{key:0}):(k(!0),H(_e,{key:1},he(s.getImageList,i=>(k(),J(p,Le(K({key:i.src},i)),we({_:2},[i.placeholder?{name:"placeholder",fn:C(()=>[a(p,K(i,{src:i.placeholder,preview:!1}),null,16,["src"])]),key:"0"}:void 0]),1040))),128))]),_:3})],2)}const f=z(g,[["render",P]]),D="/assets/resume-6e209205.svg",x="/assets/p-rotate-1d232189.svg",O="/assets/scale-8d8ebde4.svg",W="/assets/unscale-99ad049c.svg",_="/assets/unrotate-f9dd5a27.svg";var o=function(s){return s[s.LOADING=0]="LOADING",s[s.DONE=1]="DONE",s[s.FAIL=2]="FAIL",s}(o||{});const h={show:{type:Boolean,default:!1},imageList:{type:[Array],default:null},index:{type:Number,default:0},scaleStep:{type:Number},defaultWidth:{type:Number},maskClosable:{type:Boolean},rememberState:{type:Boolean}},l="img-preview",ee=G({name:"ImagePreview",props:h,emits:["img-load","img-error"],setup(s,{expose:m,emit:u}){const r=new Map,t=xe({currentUrl:"",imgScale:1,imgRotate:0,imgTop:0,imgLeft:0,status:o.LOADING,currentIndex:0,moveX:0,moveY:0,show:s.show}),y=Q(null),p=Q(null);function L(){ne();const{index:e,imageList:n}=s;if(!n||!n.length)throw new Error("imageList is undefined");t.currentIndex=e,X(n[e])}function i(){t.imgScale=1,t.imgRotate=0,t.imgTop=0,t.imgLeft=0}function ne(){const e=v(y);e&&(e.onmousewheel=A,document.body.addEventListener("DOMMouseScroll",A),document.ondragstart=function(){return!1})}const b=$(()=>{var n;const e=(n=s==null?void 0:s.scaleStep)!=null?n:0;return(e!=null?e:0>0)?e/100:t.imgScale/10});function A(e){e=e||window.event,e.delta=e.wheelDelta||-e.detail,e.preventDefault(),e.delta>0&&S(b.value),e.delta<0&&S(-b.value)}function S(e){t.imgScale<=.2&&e<0||(t.imgScale+=e)}function R(e){t.imgRotate+=e}function oe(){const e=v(p);e&&(e.onmousemove=null)}function X(e){t.status=o.LOADING;const n=new Image;n.src=e,n.onload=c=>{if(t.currentUrl!==e){const d=c.composedPath();if(s.rememberState){r.set(t.currentUrl,{scale:t.imgScale,top:t.imgTop,left:t.imgLeft,rotate:t.imgRotate});const w=r.get(e);w?(t.imgScale=w.scale,t.imgTop=w.top,t.imgRotate=w.rotate,t.imgLeft=w.left):(i(),s.defaultWidth&&(t.imgScale=s.defaultWidth/d[0].naturalWidth))}else s.defaultWidth&&(t.imgScale=s.defaultWidth/d[0].naturalWidth);d&&u("img-load",{index:t.currentIndex,dom:d[0],url:e})}t.currentUrl=e,t.status=o.DONE},n.onerror=c=>{const d=c.composedPath();d&&u("img-error",{index:t.currentIndex,dom:d[0],url:e}),t.status=o.FAIL}}function T(e){e&&e.stopPropagation(),Y()}function Y(){t.show=!1,document.body.removeEventListener("DOMMouseScroll",A),document.ondragstart=null}function U(){i()}m({resume:U,close:Y,prev:E.bind(null,"left"),next:E.bind(null,"right"),setScale:e=>{e>0&&e<=10&&(t.imgScale=e)},setRotate:e=>{t.imgRotate=e}});function E(e){const{currentIndex:n}=t,{imageList:c}=s;e==="left"&&(t.currentIndex--,n<=0&&(t.currentIndex=c.length-1)),e==="right"&&(t.currentIndex++,n>=c.length-1&&(t.currentIndex=0)),X(c[t.currentIndex])}function le(e){e=e||window.event,t.moveX=e.clientX,t.moveY=e.clientY;const n=v(p);n&&(n.onmousemove=re)}function re(e){e=e||window.event,e.preventDefault();const n=e.clientX-t.moveX,c=e.clientY-t.moveY;t.imgLeft+=n,t.imgTop+=c,t.moveX=e.clientX,t.moveY=e.clientY}const ie=$(()=>{const{imgScale:e,imgRotate:n,imgTop:c,imgLeft:d}=t;return{transform:`scale(${e}) rotate(${n}deg)`,marginTop:`${c}px`,marginLeft:`${d}px`,maxWidth:s.defaultWidth?"unset":"100%"}}),B=$(()=>{const{imageList:e}=s;return e.length>1});ye(()=>{s.show&&L(),s.imageList&&i()});const ce=e=>{s.maskClosable&&e.target&&e.target.classList.contains(`${l}-content`)&&T(e)},ue=()=>a("div",{class:`${l}__close`,onClick:T},[a(be,{class:`${l}__close-icon`},null)]),me=()=>{if(!v(B))return null;const{currentIndex:e}=t,{imageList:n}=s;return a("div",{class:`${l}__index`},[e+1,V(" / "),n.length])},de=()=>a("div",{class:`${l}__controller`},[a("div",{class:`${l}__controller-item`,onClick:()=>S(-b.value)},[a("img",{src:W},null)]),a("div",{class:`${l}__controller-item`,onClick:()=>S(b.value)},[a("img",{src:O},null)]),a("div",{class:`${l}__controller-item`,onClick:U},[a("img",{src:D},null)]),a("div",{class:`${l}__controller-item`,onClick:()=>R(-90)},[a("img",{src:_},null)]),a("div",{class:`${l}__controller-item`,onClick:()=>R(90)},[a("img",{src:x},null)])]),F=e=>v(B)?a("div",{class:[`${l}__arrow`,e],onClick:()=>E(e)},[e==="left"?a(Se,null,null):a($e,null,null)]):null;return()=>t.show&&a("div",{class:l,ref:y,onMouseup:oe,onClick:ce},[a("div",{class:`${l}-content`},[a("img",{style:v(ie),class:[`${l}-image`,t.status===o.DONE?"":"hidden"],ref:p,src:t.currentUrl,onMousedown:le},null),ue(),me(),de(),F("left"),F("right")])])}});let N=null;function te(s){var r;if(!ke)return;const m={},u=document.createElement("div");return Object.assign(m,{show:!0,index:0,scaleStep:100},s),N=a(ee,m),Ce(N,u),document.body.appendChild(u),(r=N.component)==null?void 0:r.exposed}const M=["https://picsum.photos/id/66/346/216","https://picsum.photos/id/67/346/216","https://picsum.photos/id/68/346/216"],se=G({components:{PageWrapper:De,ImagePreview:f},setup(){function s(){te({imageList:M,defaultWidth:700,rememberState:!0,onImgLoad:({index:m,url:u,dom:r})=>{}})}return{imgList:M,openImg:s}}});function ae(s,m,u,r,t,y){const p=I("ImagePreview"),L=I("a-button"),i=I("PageWrapper");return k(),J(i,{title:"\u56FE\u7247\u9884\u89C8\u793A\u4F8B"},{default:C(()=>[a(p,{imageList:s.imgList},null,8,["imageList"]),a(L,{onClick:s.openImg,type:"primary"},{default:C(()=>[V("\u65E0\u9884\u89C8\u56FE")]),_:1},8,["onClick"])]),_:1})}Z=z(se,[["render",ae]])}));export{Ee as __tla,Z as default};
|