| 1 |
- import{a as y,bK as H,b as J,c as w,bL as ee,j as Y,O as _,o as $,e as R,i as o,x as C,U as te,au as ne,T as oe,Q as B,V as ae,R as W,S as re,n as se,s as ie,r as M,K as le,h as f,at as ce,y as G,bp as ue,bq as me,cY as de,cZ as ge}from"./index.ae52ebae.js";import{I as N}from"./index.5d87e81e.js";import{P as fe}from"./index.11cb8430.js";import"./css.bcd121de.js";import"./index.c4be8493.js";import"./index.ddcc0e35.js";import"./useSize.9b10dc05.js";import"./eagerComputed.94e91cab.js";import"./onMountedOrActivated.c176aad3.js";import"./useWindowSizeFn.d176b3a5.js";import"./useContentViewHeight.2a59a8a3.js";import"./ArrowLeftOutlined.0f7d1b9e.js";const pe=y({name:"ImagePreview",components:{Image:N,PreviewGroup:N.PreviewGroup},props:{functional:H.bool,imageList:{type:Array}},setup(n){const{prefixCls:u}=J("image-preview"),i=w(()=>{const{imageList:s}=n;return s?s.map(t=>ee(t)?{src:t,placeholder:!1}:t):[]});return{prefixCls:u,getImageList:i}}});function ve(n,u,i,s,t,h){const d=_("Image"),p=_("PreviewGroup");return $(),R("div",{class:se(n.prefixCls)},[o(p,null,{default:C(()=>[!n.imageList||n.$slots.default?te(n.$slots,"default",{key:0}):($(!0),R(ne,{key:1},oe(n.getImageList,l=>($(),B(d,ae(W({key:l.src},l)),re({_:2},[l.placeholder?{name:"placeholder",fn:C(()=>[o(d,W(l,{src:l.placeholder,preview:!1}),null,16,["src"])]),key:"0"}:void 0]),1040))),128))]),_:3})],2)}var _e=Y(pe,[["render",ve]]),he="/assets/resume.8f27866b.svg",Ie="/assets/p-rotate.cb8bbfc3.svg",Le="/assets/scale.44abde22.svg",we="/assets/unscale.c552f416.svg",$e="/assets/unrotate.ef6a2daf.svg",g;(function(n){n[n.LOADING=0]="LOADING",n[n.DONE=1]="DONE",n[n.FAIL=2]="FAIL"})(g||(g={}));const Ce={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}},r="img-preview";var Se=y({name:"ImagePreview",props:Ce,emits:["img-load","img-error"],setup(n,{expose:u,emit:i}){const s=new Map,t=ie({currentUrl:"",imgScale:1,imgRotate:0,imgTop:0,imgLeft:0,status:g.LOADING,currentIndex:0,moveX:0,moveY:0,show:n.show}),h=M(null),d=M(null);function p(){U();const{index:e,imageList:a}=n;if(!a||!a.length)throw new Error("imageList is undefined");t.currentIndex=e,F(a[e])}function l(){t.imgScale=1,t.imgRotate=0,t.imgTop=0,t.imgLeft=0}function U(){const e=f(h);!e||(e.onmousewheel=S,document.body.addEventListener("DOMMouseScroll",S),document.ondragstart=function(){return!1})}const I=w(()=>{var a;const e=(a=n==null?void 0:n.scaleStep)!=null?a:0;return(e!=null?e:0>0)?e/100:t.imgScale/10});function S(e){e=e||window.event,e.delta=e.wheelDelta||-e.detail,e.preventDefault(),e.delta>0&&L(I.value),e.delta<0&&L(-I.value)}function L(e){t.imgScale<=.2&&e<0||(t.imgScale+=e)}function k(e){t.imgRotate+=e}function X(){const e=f(d);!e||(e.onmousemove=null)}function F(e){t.status=g.LOADING;const a=new Image;a.src=e,a.onload=c=>{if(t.currentUrl!==e){const m=c.composedPath();if(n.rememberState){s.set(t.currentUrl,{scale:t.imgScale,top:t.imgTop,left:t.imgLeft,rotate:t.imgRotate});const v=s.get(e);v?(t.imgScale=v.scale,t.imgTop=v.top,t.imgRotate=v.rotate,t.imgLeft=v.left):(l(),n.defaultWidth&&(t.imgScale=n.defaultWidth/m[0].naturalWidth))}else n.defaultWidth&&(t.imgScale=n.defaultWidth/m[0].naturalWidth);m&&i("img-load",{index:t.currentIndex,dom:m[0],url:e})}t.currentUrl=e,t.status=g.DONE},a.onerror=c=>{const m=c.composedPath();m&&i("img-error",{index:t.currentIndex,dom:m[0],url:e}),t.status=g.FAIL}}function P(e){e&&e.stopPropagation(),D()}function D(){t.show=!1,document.body.removeEventListener("DOMMouseScroll",S),document.ondragstart=null}function E(){l()}u({resume:E,close:D,prev:x.bind(null,"left"),next:x.bind(null,"right"),setScale:e=>{e>0&&e<=10&&(t.imgScale=e)},setRotate:e=>{t.imgRotate=e}});function x(e){const{currentIndex:a}=t,{imageList:c}=n;e==="left"&&(t.currentIndex--,a<=0&&(t.currentIndex=c.length-1)),e==="right"&&(t.currentIndex++,a>=c.length-1&&(t.currentIndex=0)),F(c[t.currentIndex])}function V(e){e=e||window.event,t.moveX=e.clientX,t.moveY=e.clientY;const a=f(d);a&&(a.onmousemove=j)}function j(e){e=e||window.event,e.preventDefault();const a=e.clientX-t.moveX,c=e.clientY-t.moveY;t.imgLeft+=a,t.imgTop+=c,t.moveX=e.clientX,t.moveY=e.clientY}const z=w(()=>{const{imgScale:e,imgRotate:a,imgTop:c,imgLeft:m}=t;return{transform:`scale(${e}) rotate(${a}deg)`,marginTop:`${c}px`,marginLeft:`${m}px`,maxWidth:n.defaultWidth?"unset":"100%"}}),A=w(()=>{const{imageList:e}=n;return e.length>1});le(()=>{n.show&&p(),n.imageList&&l()});const K=e=>{n.maskClosable&&e.target&&e.target.classList.contains(`${r}-content`)&&P(e)},q=()=>o("div",{class:`${r}__close`,onClick:P},[o(ce,{class:`${r}__close-icon`},null)]),Q=()=>{if(!f(A))return null;const{currentIndex:e}=t,{imageList:a}=n;return o("div",{class:`${r}__index`},[e+1,G(" / "),a.length])},Z=()=>o("div",{class:`${r}__controller`},[o("div",{class:`${r}__controller-item`,onClick:()=>L(-I.value)},[o("img",{src:we},null)]),o("div",{class:`${r}__controller-item`,onClick:()=>L(I.value)},[o("img",{src:Le},null)]),o("div",{class:`${r}__controller-item`,onClick:E},[o("img",{src:he},null)]),o("div",{class:`${r}__controller-item`,onClick:()=>k(-90)},[o("img",{src:$e},null)]),o("div",{class:`${r}__controller-item`,onClick:()=>k(90)},[o("img",{src:Ie},null)])]),O=e=>f(A)?o("div",{class:[`${r}__arrow`,e],onClick:()=>x(e)},[e==="left"?o(ue,null,null):o(me,null,null)]):null;return()=>t.show&&o("div",{class:r,ref:h,onMouseup:X,onClick:K},[o("div",{class:`${r}-content`},[o("img",{style:f(z),class:[`${r}-image`,t.status===g.DONE?"":"hidden"],ref:d,src:t.currentUrl,onMousedown:V},null),q(),Q(),Z(),O("left"),O("right")])])}});let b=null;function xe(n){var s;if(!de)return;const u={},i=document.createElement("div");return Object.assign(u,{show:!0,index:0,scaleStep:100},n),b=o(Se,u),ge(b,i),document.body.appendChild(i),(s=b.component)==null?void 0:s.exposed}const T=["https://picsum.photos/id/66/346/216","https://picsum.photos/id/67/346/216","https://picsum.photos/id/68/346/216"],be=y({components:{PageWrapper:fe,ImagePreview:_e},setup(){function n(){xe({imageList:T,defaultWidth:700,rememberState:!0,onImgLoad:({index:i,url:s,dom:t})=>{i+1,`${s}`}})}return{imgList:T,openImg:n}}});function ye(n,u,i,s,t,h){const d=_("ImagePreview"),p=_("a-button"),l=_("PageWrapper");return $(),B(l,{title:"\u56FE\u7247\u9884\u89C8\u793A\u4F8B"},{default:C(()=>[o(d,{imageList:n.imgList},null,8,["imageList"]),o(p,{onClick:n.openImg,type:"primary"},{default:C(()=>[G("\u65E0\u9884\u89C8\u56FE")]),_:1},8,["onClick"])]),_:1})}var Ye=Y(be,[["render",ye]]);export{Ye as default};
|