index.a87156f7.js 6.5 KB

1
  1. import{a as b,aW as Q,b as Z,f as L,av as ee,aw as T,w as h,o as $,h as O,n as o,z as C,bh as te,F as ne,b2 as oe,j as G,b1 as ae,b0 as M,bS as se,q as re,v as ie,s as N,L as le,i as g,c7 as ce,B as X,df as ue,dg as me,f5 as de,f6 as ge}from"./index.7e08ba81.js";import{I as R}from"./index.01b7ee47.js";import{P as fe}from"./index.334036fa.js";import"./index.ea1692d3.js";import"./index.3132743a.js";import"./useSize.1210be5f.js";import"./eagerComputed.41f917f7.js";import"./useWindowSizeFn.9cd1b73f.js";import"./useContentViewHeight.eee5bfce.js";import"./ArrowLeftOutlined.8453d1a8.js";import"./index.492f2ae6.js";import"./transButton.38e068f8.js";const pe=b({name:"ImagePreview",components:{Image:R,PreviewGroup:R.PreviewGroup},props:{functional:Q.bool,imageList:{type:Array}},setup(n){const{prefixCls:u}=Z("image-preview"),i=L(()=>{const{imageList:r}=n;return r?r.map(t=>ee(t)?{src:t,placeholder:!1}:t):[]});return{prefixCls:u,getImageList:i}}});function ve(n,u,i,r,t,_){const d=h("Image"),p=h("PreviewGroup");return $(),O("div",{class:re(n.prefixCls)},[o(p,null,{default:C(()=>[!n.imageList||n.$slots.default?te(n.$slots,"default",{key:0}):($(!0),O(ne,{key:1},oe(n.getImageList,l=>($(),G(d,ae(M({key:l.src},l)),se({_:2},[l.placeholder?{name:"placeholder",fn:C(()=>[o(d,M(l,{src:l.placeholder,preview:!1}),null,16,["src"])]),key:"0"}:void 0]),1040))),128))]),_:3})],2)}var he=T(pe,[["render",ve]]),_e="/qasimadmin/assets/resume.6e209205.svg",Ie="/qasimadmin/assets/p-rotate.1d232189.svg",we="/qasimadmin/assets/scale.8d8ebde4.svg",Le="/qasimadmin/assets/unscale.99ad049c.svg",$e="/qasimadmin/assets/unrotate.f9dd5a27.svg",f=function(n){return n[n.LOADING=0]="LOADING",n[n.DONE=1]="DONE",n[n.FAIL=2]="FAIL",n}(f||{});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}},s="img-preview";var Se=b({name:"ImagePreview",props:Ce,emits:["img-load","img-error"],setup(n,{expose:u,emit:i}){const r=new Map,t=ie({currentUrl:"",imgScale:1,imgRotate:0,imgTop:0,imgLeft:0,status:f.LOADING,currentIndex:0,moveX:0,moveY:0,show:n.show}),_=N(null),d=N(null);function p(){Y();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 Y(){const e=g(_);!e||(e.onmousewheel=S,document.body.addEventListener("DOMMouseScroll",S),document.ondragstart=function(){return!1})}const I=L(()=>{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&&w(I.value),e.delta<0&&w(-I.value)}function w(e){t.imgScale<=.2&&e<0||(t.imgScale+=e)}function k(e){t.imgRotate+=e}function U(){const e=g(d);!e||(e.onmousemove=null)}function F(e){t.status=f.LOADING;const a=new Image;a.src=e,a.onload=c=>{if(t.currentUrl!==e){const m=c.composedPath();if(n.rememberState){r.set(t.currentUrl,{scale:t.imgScale,top:t.imgTop,left:t.imgLeft,rotate:t.imgRotate});const v=r.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=f.DONE},a.onerror=c=>{const m=c.composedPath();m&&i("img-error",{index:t.currentIndex,dom:m[0],url:e}),t.status=f.FAIL}}function P(e){e&&e.stopPropagation(),D()}function D(){t.show=!1,document.body.removeEventListener("DOMMouseScroll",S),document.ondragstart=null}function A(){l()}u({resume:A,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 q(e){e=e||window.event,t.moveX=e.clientX,t.moveY=e.clientY;const a=g(d);a&&(a.onmousemove=z)}function z(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 j=L(()=>{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%"}}),E=L(()=>{const{imageList:e}=n;return e.length>1});le(()=>{n.show&&p(),n.imageList&&l()});const V=e=>{n.maskClosable&&e.target&&e.target.classList.contains(`${s}-content`)&&P(e)},H=()=>o("div",{class:`${s}__close`,onClick:P},[o(ce,{class:`${s}__close-icon`},null)]),J=()=>{if(!g(E))return null;const{currentIndex:e}=t,{imageList:a}=n;return o("div",{class:`${s}__index`},[e+1,X(" / "),a.length])},K=()=>o("div",{class:`${s}__controller`},[o("div",{class:`${s}__controller-item`,onClick:()=>w(-I.value)},[o("img",{src:Le},null)]),o("div",{class:`${s}__controller-item`,onClick:()=>w(I.value)},[o("img",{src:we},null)]),o("div",{class:`${s}__controller-item`,onClick:A},[o("img",{src:_e},null)]),o("div",{class:`${s}__controller-item`,onClick:()=>k(-90)},[o("img",{src:$e},null)]),o("div",{class:`${s}__controller-item`,onClick:()=>k(90)},[o("img",{src:Ie},null)])]),W=e=>g(E)?o("div",{class:[`${s}__arrow`,e],onClick:()=>x(e)},[e==="left"?o(ue,null,null):o(me,null,null)]):null;return()=>t.show&&o("div",{class:s,ref:_,onMouseup:U,onClick:V},[o("div",{class:`${s}-content`},[o("img",{style:g(j),class:[`${s}-image`,t.status===f.DONE?"":"hidden"],ref:d,src:t.currentUrl,onMousedown:q},null),H(),J(),K(),W("left"),W("right")])])}});let y=null;function xe(n){var r;if(!de)return;const u={},i=document.createElement("div");return Object.assign(u,{show:!0,index:0,scaleStep:100},n),y=o(Se,u),ge(y,i),document.body.appendChild(i),(r=y.component)==null?void 0:r.exposed}const B=["https://picsum.photos/id/66/346/216","https://picsum.photos/id/67/346/216","https://picsum.photos/id/68/346/216"],ye=b({components:{PageWrapper:fe,ImagePreview:he},setup(){function n(){xe({imageList:B,defaultWidth:700,rememberState:!0,onImgLoad:({index:i,url:r,dom:t})=>{i+1,`${r}`}})}return{imgList:B,openImg:n}}});function be(n,u,i,r,t,_){const d=h("ImagePreview"),p=h("a-button"),l=h("PageWrapper");return $(),G(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(()=>[X("\u65E0\u9884\u89C8\u56FE")]),_:1},8,["onClick"])]),_:1})}var Te=T(ye,[["render",be]]);export{Te as default};