fox-preview-image
Version:
一个支持 vue3 的预览图片组件
2 lines (1 loc) • 12.7 kB
JavaScript
(function(k,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(k=typeof globalThis<"u"?globalThis:k||self,e(k.foxPreviewImage={},k.Vue))})(this,function(k,e){"use strict";function b(t){return Object.prototype.toString.call(t).replace(new RegExp("(^[[a-z]+ )([A-Za-z]+)(])","g"),"$2").toLowerCase()}const _=Object.create(null);function F(t){return b(t)==="object"}function j(t){return b(t)==="function"}function D(t){return b(t)==="array"}function A(t){return b(t)==="symbol"}function P(t){return[0,void 0,null].includes(t)}_.isObject=F,_.isFunction=j,_.isArray=D,_.isSymbol=A,_.isFalse=P,b.prototype=_;const h=(t,o)=>{const l=t.__vccOpts||t;for(const[c,a]of o)l[c]=a;return l},W={},H={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"};function K(t,o){return e.openBlock(),e.createElementBlock("svg",H,o[0]||(o[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"},null,-1)]))}const X=h(W,[["render",K]]),Y={},Z={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"};function q(t,o){return e.openBlock(),e.createElementBlock("svg",Z,o[0]||(o[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"},null,-1)]))}const S=h(Y,[["render",q]]),G={class:"fox-preview-switch"},U=e.defineComponent({__name:"switch",emits:["prev","next"],setup(t,{emit:o}){const l=o,c=()=>{l("prev")},a=()=>{l("next")};return(r,m)=>(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("div",{class:"fox-preview-switch-item fox-preview-switch-item-left",onClick:c},[e.createVNode(S,{class:"preview-operate-icon preview-switch-icon-left"})]),e.createElementVNode("div",{class:"fox-preview-switch-item",onClick:a},[e.createVNode(S,{class:"fox-preview-switch-icon fox-preview-switch-icon"})])]))}}),J={},Q={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"};function ee(t,o){return e.openBlock(),e.createElementBlock("svg",Q,o[0]||(o[0]=[e.createElementVNode("path",{fill:"currentColor",d:"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"},null,-1)]))}const te=h(J,[["render",ee]]),oe={},le={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"};function ne(t,o){return e.openBlock(),e.createElementBlock("svg",le,o[0]||(o[0]=[e.createElementVNode("path",{fill:"currentColor",d:"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"},null,-1)]))}const re=h(oe,[["render",ne]]),ae={},se={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"};function ce(t,o){return e.openBlock(),e.createElementBlock("svg",se,o[0]||(o[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z"},null,-1)]))}const ie=h(ae,[["render",ce]]),de={},me={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"};function ue(t,o){return e.openBlock(),e.createElementBlock("svg",me,o[0]||(o[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"},null,-1)]))}const fe=h(de,[["render",ue]]),pe={},we={viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",class:"svg","aria-role":"button"};function ye(t,o){return e.openBlock(),e.createElementBlock("svg",we,o[0]||(o[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64v450.304z"},null,-1)]))}const xe=h(pe,[["render",ye]]),ke={class:"fox-preview-toolbar"},he=e.defineComponent({__name:"toolbar",props:{scale:{default:1},index:{default:"1/1"},layout:{default:"zoomOut, zoomIn, scale, position, rotateLeft, rotateRight, download"}},emits:["click"],setup(t,{emit:o}){const l=t,c=o,a=m=>{c("click",m)},r=e.computed(()=>l.layout.split(",").map(m=>m.trim()));return console.log(r),(m,i)=>(e.openBlock(),e.createElementBlock("div",ke,[r.value.includes("zoomOut")?(e.openBlock(),e.createBlock(te,{key:0,role:"button",title:"缩小",class:"fox-preview-toolbar-item",style:e.normalizeStyle({order:r.value.indexOf("zoomOut")}),onClick:i[0]||(i[0]=s=>a("zoom-out"))},null,8,["style"])):e.createCommentVNode("",!0),r.value.includes("zoomIn")?(e.openBlock(),e.createBlock(re,{key:1,role:"button",title:"放大",class:"fox-preview-toolbar-item",style:e.normalizeStyle({order:r.value.indexOf("zoomIn")}),onClick:i[1]||(i[1]=s=>a("zoom-in"))},null,8,["style"])):e.createCommentVNode("",!0),r.value.includes("scale")?(e.openBlock(),e.createElementBlock("div",{key:2,role:"button",title:"缩放倍数",tabindex:"-1",class:"fox-preview-toolbar-item fox-preview-toolbar-scale",style:e.normalizeStyle({order:r.value.indexOf("scale")})},e.toDisplayString(l.scale),5)):e.createCommentVNode("",!0),r.value.includes("position")?(e.openBlock(),e.createElementBlock("div",{key:3,role:"button",title:"图片位置",class:"fox-preview-toolbar-item fox-preview-toolbar-position",style:e.normalizeStyle({order:r.value.indexOf("position")})},e.toDisplayString(l.index),5)):e.createCommentVNode("",!0),r.value.includes("rotateLeft")?(e.openBlock(),e.createBlock(ie,{key:4,role:"button",title:"左旋转",class:"fox-preview-toolbar-item",style:e.normalizeStyle({order:r.value.indexOf("rotateLeft")}),onClick:i[2]||(i[2]=s=>a("contraRotate"))},null,8,["style"])):e.createCommentVNode("",!0),r.value.includes("rotateRight")?(e.openBlock(),e.createBlock(fe,{key:5,role:"button",title:"右旋转",class:"fox-preview-toolbar-item",style:e.normalizeStyle({order:r.value.indexOf("rotateRight")}),onClick:i[3]||(i[3]=s=>a("clockwiseRotation"))},null,8,["style"])):e.createCommentVNode("",!0),r.value.includes("download")?(e.openBlock(),e.createBlock(xe,{key:6,role:"button",title:"下载/保存",class:"fox-preview-toolbar-item",style:e.normalizeStyle({order:r.value.indexOf("download")}),onClick:i[4]||(i[4]=s=>a("download"))},null,8,["style"])):e.createCommentVNode("",!0)]))}});typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const M=()=>{};function ge(t,o){function l(...c){return new Promise((a,r)=>{Promise.resolve(t(()=>o.apply(this,c),{fn:o,thisArg:this,args:c})).then(a).catch(r)})}return l}function be(...t){let o=0,l,c=!0,a=M,r,m,i,s,y;!e.isRef(t[0])&&typeof t[0]=="object"?{delay:m,trailing:i=!0,leading:s=!0,rejectOnCancel:y=!1}=t[0]:[m,i=!0,s=!0,y=!1]=t;const f=()=>{l&&(clearTimeout(l),l=void 0,a(),a=M)};return B=>{const p=e.toValue(m),g=Date.now()-o,u=()=>r=B();return f(),p<=0?(o=Date.now(),u()):(g>p&&(s||!c)?(o=Date.now(),u()):i&&(r=new Promise((x,N)=>{a=y?N:x,l=setTimeout(()=>{o=Date.now(),c=!0,x(u()),f()},Math.max(0,p-g))})),!s&&!l&&(l=setTimeout(()=>c=!0,p)),c=!1,r)}}function T(t,o=200,l=!1,c=!0,a=!1){return ge(be(o,l,c,a),t)}const _e=(t,o)=>{const l=document.createElement("a");l.download=o,l.href=t,l.style.display="none",document.body.appendChild(l),l.click();const c=setTimeout(()=>{document.body.removeChild(l),clearTimeout(c)},10)},Be=()=>{const t=document.createElement("div"),o=document.createElement("div");t.appendChild(o),t.style.width="100px",t.style.height="50px",t.style.overflow="scroll",t.style.marginLeft="-100000px",document.body.appendChild(t);const l=o.offsetWidth,c=t.offsetWidth,a=setTimeout(()=>{document.body.removeChild(t),clearTimeout(a)},10);return c-l},ve=["onKeyup"],Ce=["src"],z=e.defineComponent({name:"FoxPreviewImage",__name:"index",props:{modelValue:{type:Boolean,default:!1},src:{default:""},zIndex:{default:9e3},initialIndex:{default:0},appendTo:{default:"body"},showToolbar:{type:Boolean,default:!0},enableTeleport:{type:Boolean,default:!1},layout:{default:"zoomOut, zoomIn, scale, position, rotateLeft, rotateRight, download"}},emits:["update:modelValue"],setup(t,{emit:o}){const l=t,c=o;let a="";e.onBeforeMount(()=>{a=document.body.style.cssText});const r=e.ref(null),m=e.ref(!1),i=e.ref(0),s=l.src&&l.src.length?e.ref(l.initialIndex):e.ref(0),y=e.ref(0),f=e.ref(1),v=e.ref(0),B=e.ref(0),p=e.ref(0),g=e.ref(0),u=e.ref([]);let x=e.reactive({x:0,y:0});const N=()=>{m.value=l.modelValue},L=()=>{m.value=!1,c("update:modelValue",m.value)},ze=n=>{if(i.value!==1)return;const{x:d,y:w}=n,C=d-x.x,E=w-x.y;p.value=C+p.value-v.value,g.value=E+g.value-B.value,v.value=C,B.value=E},O=()=>{f.value>.5&&(f.value-=.1)},I=()=>{f.value<2&&(f.value+=.1)},Ve=n=>{requestAnimationFrame(()=>{(n.wheelDelta||n.detail*-40)>0?I():O()})},R=T(ze,10),V=T(Ve,10),$e=()=>{i.value=0,v.value=0,B.value=0},Ee=n=>{i.value=1,x={x:n.x,y:n.y}},Ne=()=>{y.value+=90},Se=()=>{y.value-=90},Me=()=>{const n=u.value[s.value],d=n.split("/"),w=d[d.length-1];_e(n,w)},$=()=>{y.value=0,f.value=1,p.value=0,g.value=0,x.x=0,x.y=0,v.value=0,B.value=0},Te=()=>{const n=u.value.length||0;s.value>0?s.value--:s.value=n-1,$()},Le=()=>{const n=u.value.length||0;s.value<n-1?s.value++:s.value=0,$()},Oe=e.computed(()=>parseFloat(f.value.toFixed(1))),Ie=e.computed(()=>`${s.value+1}/${u.value.length}`),Re=n=>{switch(n){case"zoom-out":O();break;case"zoom-in":I();break;case"contraRotate":Se();break;case"clockwiseRotation":Ne();break;case"download":Me();break}};e.onMounted(()=>{N()});const Fe=n=>n.scrollHeight>window.innerHeight;return e.watch(()=>l.modelValue,n=>{m.value=n,n?(r.value!==null&&r.value.focus(),Fe(document.body)&&(document.body.style.paddingRight=Be()+"px",document.body.classList.add("fox-lock-window"))):(document.body.classList.remove("fox-lock-window"),a?document.body.style.cssText=a:document.body.removeAttribute("style"))}),e.watch(()=>l.src,n=>{const d=b(n);d==="string"?(s.value=0,$(),u.value=[n]):d==="array"&&(l.initialIndex>=0&&l.initialIndex<n.length?s.value=l.initialIndex:s.value=0,$(),u.value=n)},{immediate:!0}),(n,d)=>(e.openBlock(),e.createBlock(e.Teleport,{to:l.appendTo,disabled:l.enableTeleport===!1},[e.createVNode(e.Transition,null,{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("div",{key:0,role:"dialog",ref_key:"refEl",ref:r,class:"fox-preview",style:e.normalizeStyle({"z-index":l.zIndex}),tabindex:"1",onKeyup:e.withKeys(e.withModifiers(L,["exact"]),["esc"])},[e.createElementVNode("div",{class:"fox-preview-canvas",onMousewheel:d[1]||(d[1]=(...w)=>e.unref(V)&&e.unref(V)(...w)),"on:DOMMouseScroll":d[2]||(d[2]=(...w)=>e.unref(V)&&e.unref(V)(...w))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(w,C)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:C},[e.unref(s)===C?(e.openBlock(),e.createElementBlock("div",{key:0,onMousemove:d[0]||(d[0]=(...E)=>e.unref(R)&&e.unref(R)(...E)),onMouseup:$e,onMousedown:Ee,style:e.normalizeStyle([{transform:`rotate(${y.value}deg) scale(${f.value}) translate(${p.value}px,${g.value}px)`},{display:"inline-block"}])},[e.createElementVNode("img",{class:"fox-preview-image",src:w,alt:"被拖拽的图片",draggable:"false"},null,8,Ce)],36)):e.createCommentVNode("",!0)],64))),128))],32),e.createElementVNode("div",{class:"fox-preview-close",onClick:L},[e.createVNode(X)]),u.value&&u.value.length>1?(e.openBlock(),e.createBlock(U,{key:0,onPrev:Te,onNext:Le})):e.createCommentVNode("",!0),n.showToolbar?(e.openBlock(),e.createBlock(he,{key:1,onClick:Re,scale:Oe.value,index:Ie.value,layout:l.layout},null,8,["scale","index","layout"])):e.createCommentVNode("",!0)],44,ve)):e.createCommentVNode("",!0)]),_:1})],8,["to","disabled"]))}});z.install=t=>{t.component(z.name,z)},k.default=z,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});