functional-213c1e18.js 5.1 KB
import{d as k,e as _,r as U,k as M,s as B,f as s,u as m,E as V,m as j}from"./vue-5a35c3f5.js";import{p as q,h as z,ak as H,_ as J,aT as K}from"./index.js";import{aP as N,b0 as Q,aD as Z,aE as ee}from"./antd-6b087f69.js";const de=k({name:"ImagePreview",components:{Image:N,PreviewGroup:N.PreviewGroup},props:{functional:q.bool,imageList:{type:Array}},setup(n){const{prefixCls:u}=z("image-preview"),c=_(()=>{const{imageList:r}=n;return r?r.map(t=>H(t)?{src:t,placeholder:!1}:t):[]});return{prefixCls:u,getImageList:c}}});const te="/assets/resume-8f27866b.svg",ne="/assets/p-rotate-cb8bbfc3.svg",oe="/assets/scale-44abde22.svg",se="/assets/unscale-c552f416.svg",ie="/assets/unrotate-ef6a2daf.svg";var d=function(n){return n[n.LOADING=0]="LOADING",n[n.DONE=1]="DONE",n[n.FAIL=2]="FAIL",n}(d||{});const le={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}},i="img-preview",ae=k({name:"ImagePreview",props:le,emits:["img-load","img-error"],setup(n,{expose:u,emit:c}){const r=new Map,t=U({currentUrl:"",imgScale:1,imgRotate:0,imgTop:0,imgLeft:0,status:d.LOADING,currentIndex:0,moveX:0,moveY:0,show:n.show}),x=M(null),h=M(null);function E(){O();const{index:e,imageList:o}=n;if(!o||!o.length)throw new Error("imageList is undefined");t.currentIndex=e,C(o[e])}function p(){t.imgScale=1,t.imgRotate=0,t.imgTop=0,t.imgLeft=0}function O(){const e=m(x);e&&(e.onmousewheel=w,document.body.addEventListener("DOMMouseScroll",w),document.ondragstart=function(){return!1})}const f=_(()=>{var o;const e=(o=n==null?void 0:n.scaleStep)!=null?o:0;return(e!=null?e:0>0)?e/100:t.imgScale/10});function w(e){e=e||window.event,e.delta=e.wheelDelta||-e.detail,e.preventDefault(),e.delta>0&&v(f.value),e.delta<0&&v(-f.value)}function v(e){t.imgScale<=.2&&e<0||(t.imgScale+=e*.1,t.imgScale<0&&(t.imgScale=.02))}function S(e){t.imgRotate+=e}function R(){const e=m(h);e&&(e.onmousemove=null)}function C(e){t.status=d.LOADING;const o=new Image;o.src=e,o.onload=l=>{if(t.currentUrl!==e){const a=l.composedPath();if(n.rememberState){r.set(t.currentUrl,{scale:t.imgScale,top:t.imgTop,left:t.imgLeft,rotate:t.imgRotate});const g=r.get(e);g?(t.imgScale=g.scale,t.imgTop=g.top,t.imgRotate=g.rotate,t.imgLeft=g.left):(p(),n.defaultWidth&&(t.imgScale=n.defaultWidth/a[0].naturalWidth))}else n.defaultWidth&&(t.imgScale=n.defaultWidth/a[0].naturalWidth);a&&c("img-load",{index:t.currentIndex,dom:a[0],url:e})}t.currentUrl=e,t.status=d.DONE},o.onerror=l=>{const a=l.composedPath();a&&c("img-error",{index:t.currentIndex,dom:a[0],url:e}),t.status=d.FAIL}}function b(e){e&&e.stopPropagation(),y()}function y(){t.show=!1,document.body.removeEventListener("DOMMouseScroll",w),document.ondragstart=null}function $(){p()}u({resume:$,close:y,prev:I.bind(null,"left"),next:I.bind(null,"right"),setScale:e=>{e>0&&e<=10&&(t.imgScale=e)},setRotate:e=>{t.imgRotate=e}});function I(e){const{currentIndex:o}=t,{imageList:l}=n;e==="left"&&(t.currentIndex--,o<=0&&(t.currentIndex=l.length-1)),e==="right"&&(t.currentIndex++,o>=l.length-1&&(t.currentIndex=0)),C(l[t.currentIndex])}function P(e){e=e||window.event,t.moveX=e.clientX,t.moveY=e.clientY;const o=m(h);o&&(o.onmousemove=T)}function T(e){e=e||window.event,e.preventDefault();const o=e.clientX-t.moveX,l=e.clientY-t.moveY;t.imgLeft+=o,t.imgTop+=l,t.moveX=e.clientX,t.moveY=e.clientY}const W=_(()=>{const{imgScale:e,imgRotate:o,imgTop:l,imgLeft:a}=t;return{transform:`scale(${e}) rotate(${o}deg)`,marginTop:`${l}px`,marginLeft:`${a}px`,maxWidth:n.defaultWidth?"unset":"100%"}}),D=_(()=>{const{imageList:e}=n;return e.length>1});B(()=>{n.show&&E(),n.imageList&&p()});const F=e=>{n.maskClosable&&e.target&&e.target.classList.contains(`${i}-content`)&&b(e)},G=()=>s("div",{class:`${i}__close`,onClick:b},[s(Q,{class:`${i}__close-icon`},null)]),X=()=>{if(!m(D))return null;const{currentIndex:e}=t,{imageList:o}=n;return s("div",{class:`${i}__index`},[e+1,V(" / "),o.length])},Y=()=>s("div",{class:`${i}__controller`},[s("div",{class:`${i}__controller-item`,onClick:()=>v(-f.value)},[s("img",{src:se},null)]),s("div",{class:`${i}__controller-item`,onClick:()=>v(f.value)},[s("img",{src:oe},null)]),s("div",{class:`${i}__controller-item`,onClick:$},[s("img",{src:te},null)]),s("div",{class:`${i}__controller-item`,onClick:()=>S(-90)},[s("img",{src:ie},null)]),s("div",{class:`${i}__controller-item`,onClick:()=>S(90)},[s("img",{src:ne},null)])]),A=e=>m(D)?s("div",{class:[`${i}__arrow`,e],onClick:()=>I(e)},[e==="left"?s(Z,null,null):s(ee,null,null)]):null;return()=>t.show&&s("div",{class:i,ref:x,onMouseup:R,onClick:F},[s("div",{class:`${i}-content`},[s("img",{style:m(W),class:[`${i}-image`,t.status===d.DONE?"":"hidden"],ref:h,src:t.currentUrl,onMousedown:P},null),G(),X(),Y(),A("left"),A("right")])])}});const re=J(ae,[["__file","E:/allcode/erp/test7901/order-erp-front/src/components/Preview/src/Functional.vue"]]);let L=null;function ge(n){var r;if(!K)return;const u={},c=document.createElement("div");return Object.assign(u,{show:!0,index:0,scaleStep:100},n),L=s(re,u),j(L,c),document.body.appendChild(c),(r=L.component)==null?void 0:r.exposed}export{de as _,ge as c};