index.95e5ae6c.js 6.5 KB

1
  1. import{a as b,aV as Q,b as Z,f as L,au as ee,av as B,a_ as _,o as $,h as W,n as o,y 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,K as le,i as g,c7 as ce,z as X,df as ue,dg as me,f5 as de,f6 as ge}from"./index.f9240906.js";import{I as R}from"./index.e73b9811.js";import{P as fe}from"./index.ab16c1d0.js";import"./index.963f7d97.js";import"./index.e6f3c6c4.js";import"./useSize.3965ca89.js";import"./eagerComputed.938959e2.js";import"./useWindowSizeFn.e05ba499.js";import"./useContentViewHeight.51fb01ea.js";import"./ArrowLeftOutlined.8ef55b3d.js";import"./index.ae5f4215.js";import"./transButton.bc515676.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,h){const d=_("Image"),p=_("PreviewGroup");return $(),W("div",{class:re(n.prefixCls)},[o(p,null,{default:C(()=>[!n.imageList||n.$slots.default?te(n.$slots,"default",{key:0}):($(!0),W(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 _e=B(pe,[["render",ve]]),he="/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}),h=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(h);!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 V=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 j=e=>{n.maskClosable&&e.target&&e.target.classList.contains(`${s}-content`)&&P(e)},K=()=>o("div",{class:`${s}__close`,onClick:P},[o(ce,{class:`${s}__close-icon`},null)]),H=()=>{if(!g(E))return null;const{currentIndex:e}=t,{imageList:a}=n;return o("div",{class:`${s}__index`},[e+1,X(" / "),a.length])},J=()=>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:he},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)])]),O=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:h,onMouseup:U,onClick:j},[o("div",{class:`${s}-content`},[o("img",{style:g(V),class:[`${s}-image`,t.status===f.DONE?"":"hidden"],ref:d,src:t.currentUrl,onMousedown:q},null),K(),H(),J(),O("left"),O("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 T=["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:_e},setup(){function n(){xe({imageList:T,defaultWidth:700,rememberState:!0,onImgLoad:({index:i,url:r,dom:t})=>{i+1,`${r}`}})}return{imgList:T,openImg:n}}});function be(n,u,i,r,t,h){const d=_("ImagePreview"),p=_("a-button"),l=_("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 Be=B(ye,[["render",be]]);export{Be as default};