From 3398261d792a2a68f5594a6770b7097319ece98f Mon Sep 17 00:00:00 2001 From: GuoJiKun Date: Wed, 17 Aug 2022 10:37:29 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=B0=91=E9=87=8Fbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/preview-image.js | 2 +- lib/preview-image.mjs | 315 +++++++++--------- lib/preview-image.umd.js | 2 +- lib/style.css | 2 +- package.json | 2 +- src/components/preview-image/src/index.vue | 43 +-- types/components/preview-image/index.d.ts | 1 + .../preview-image/src/index.vue.d.ts | 1 + 8 files changed, 190 insertions(+), 178 deletions(-) diff --git a/lib/preview-image.js b/lib/preview-image.js index fb55d7a..6e840e4 100644 --- a/lib/preview-image.js +++ b/lib/preview-image.js @@ -1 +1 @@ -"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");function h(t){return Object.prototype.toString.call(t).replace(new RegExp("(^[[a-z]+ )([A-Za-z]+)(])","g"),"$2").toLowerCase()}const w=Object.create(null);function j(t){return h(t)==="object"}function H(t){return h(t)==="function"}function P(t){return h(t)==="array"}function T(t){return h(t)==="symbol"}function W(t){return[0,void 0,null].includes(t)}w.isObject=j;w.isFunction=H;w.isArray=P;w.isSymbol=T;w.isFalse=W;h.prototype=w;const f=(t,o)=>{const r=t.__vccOpts||t;for(const[_,a]of o)r[_]=a;return r},q={},X={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},Y=e.createElementVNode("path",{d:"M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"},null,-1),U=e.createElementVNode("path",{d:"M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"},null,-1),G=[Y,U];function J(t,o){return e.openBlock(),e.createElementBlock("svg",X,G)}const K=f(q,[["render",J]]);const Q={},ee={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},te=e.createElementVNode("path",{d:"M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"},null,-1),oe=e.createElementVNode("path",{d:"M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"},null,-1),le=[te,oe];function ne(t,o){return e.openBlock(),e.createElementBlock("svg",ee,le)}const ae=f(Q,[["render",ne]]);const se={},re={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},ie=e.createElementVNode("path",{d:"M559.78666667 512L853.33333333 218.45333333c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0L512 464.21333333l-293.54666667-295.82222186c-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666l293.54666666 295.82222187-295.82222186 293.54666667c-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666 6.82666667 6.82666667 15.92888853 9.10222187 25.0311104 9.10222187s18.2044448-2.2755552 25.03111146-9.10222187L512 559.78666667 805.54666667 853.33333333c6.82666667 6.82666667 15.92888853 9.10222187 25.03111146 9.10222187s18.2044448-2.2755552 25.0311104-9.10222187c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666L559.78666667 512z"},null,-1),ce=[ie];function ue(t,o){return e.openBlock(),e.createElementBlock("svg",re,ce)}const de=f(se,[["render",ue]]);const ve={},me={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},_e=e.createElementVNode("path",{d:"M881.6703206 269.97378253a437.96818845 437.96818845 0 0 0-719.14189984-11.18481067V200.37940505a24.44088298 24.44088298 0 0 0-48.93354667 0v144.15978193c0 4.40143053 1.44988327 8.28504534 3.46936176 11.85796975a24.3373191 24.3373191 0 0 0 12.16866016 12.53113128c12.47934934 5.38527881 26.77105186 0 32.31167525-12.37578668a389.70780089 389.70780089 0 0 1 356.25693276-231.2045345 389.70780089 389.70780089 0 0 1 389.75958282 389.75958282c0 214.94513422-174.86622932 389.81136475-389.75958282 389.81136353a389.08642251 389.08642251 0 0 1-383.7011437-320.99370902 24.44088298 24.44088298 0 1 0-48.1568237 8.59573332 437.96818845 437.96818845 0 0 0 431.8579674 361.33152236c241.92331261 0 438.69312948-196.82159882 438.69312948-438.74491019 0-87.82147675-25.89076502-172.58784237-74.8243129-245.13376712"},null,-1),pe=[_e];function fe(t,o){return e.openBlock(),e.createElementBlock("svg",me,pe)}const he=f(ve,[["render",fe]]);const we={},ye={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},ge=e.createElementVNode("path",{d:"M924.39230934 564.14465897a24.3373191 24.3373191 0 0 0-28.37627972 19.78054519A389.08642251 389.08642251 0 0 1 512.2631052 904.91891318c-214.94513422 0-389.81136475-174.86622932-389.81136476-389.81136353a389.70780089 389.70780089 0 0 1 713.03168-217.94846342c12.63469394 18.69313305 23.76772267 38.68080355 32.98483557 59.3934151 5.48884268 12.32400475 19.88410785 17.91641008 32.25989333 12.32400475a24.02662992 24.02662992 0 0 0 12.22044088-12.42756741 24.07841185 24.07841185 0 0 0 3.5211449-11.90975169V200.37940505a24.49266369 24.49266369 0 0 0-48.93354666 0v58.46134754a437.86462459 437.86462459 0 0 0-719.14190105 11.13302994A436.51830518 436.51830518 0 0 0 73.56997572 515.10754965c0 241.92331261 196.82159882 438.69312948 438.69312948 438.69312947a437.96818845 437.96818845 0 0 0 431.90974813-361.27974164 24.49266369 24.49266369 0 0 0-19.78054399-28.37627851"},null,-1),Ce=[ge];function ke(t,o){return e.openBlock(),e.createElementBlock("svg",ye,Ce)}const $e=f(we,[["render",ke]]);const Be={},Ee={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},be=e.createElementVNode("path",{d:"M325.3196818 850.33221435c-9.66522217-9.66522217-10.23376465-24.62036133-1.58203125-33.81591797l290.82183838-290.84655761c12.48321533-11.84051513 12.43377685-14.93041992 1e-8-27.36419678L323.73765055 207.50842285C315.06119792 198.31286621 315.65445964 183.35772705 325.3196818 173.69250489c9.83825684-9.83825684 25.18890381-10.38208008 34.33502198-1.26068116l323.03100586 323.03100586c3.97979737 3.97979737 5.75958252 9.14611817 6.08093262 14.51019288l-1e-8 4.05395507c-0.34606934 5.36407471-2.1258545 10.53039551-6.08093261 14.51019287L359.65470378 851.59289551C350.50858561 860.6895752 335.1332194 860.14575195 325.3196818 850.33221435z"},null,-1),Ve=[be];function xe(t,o){return e.openBlock(),e.createElementBlock("svg",Ee,Ve)}const Me=f(Be,[["render",xe]]);const Ne=e.defineComponent({name:"FoxPreviewImage",components:{ZoomOut:K,ZoomIn:ae,RotateLeft:he,RotateRight:$e,Close:de,ArrowRight:Me},props:{modelValue:{type:Boolean,default:!1},src:{type:[String,Array],required:!0},zIndex:{type:Number,default:9e3},initialIndex:{type:Number,default:0}},setup(t,{emit:o}){let r=e.ref(!1),_=e.ref(0),a=t.src&&t.src.length?e.ref(t.initialIndex):e.ref(0),m=e.ref(0),s=e.ref(1),i=e.ref(0),c=e.ref(0),u=e.ref(0),d=e.ref(0),v=e.ref([]),n=e.reactive({x:0,y:0});const g=()=>{r.value=t.modelValue},p=()=>{r.value=!1,o("update:modelValue",r.value)},V=l=>{if(_.value===1){const{x:y,y:$}=l,C=y-n.x,k=$-n.y;u.value=C+u.value-i.value,d.value=k+d.value-c.value,requestAnimationFrame(()=>{i.value=C,c.value=k})}},E=()=>{s.value>.5&&(s.value-=.1)},b=()=>{s.value<2&&(s.value+=.1)},x=l=>{requestAnimationFrame(()=>{(l.wheelDelta||l.detail*-40)>0?b():E()})},M=V,N=x,z=()=>{_.value=0,i.value=0,c.value=0},F=l=>{_.value=1,n={x:l.x,y:l.y}},S=()=>{m.value+=90},I=()=>{m.value-=90},R=()=>{const l=document.createElement("div"),y=document.createElement("div");l.appendChild(y),l.style.width="100px",l.style.height="50px",l.style.overflow="scroll",l.style.marginLeft="-100000px",document.body.appendChild(l);const $=y.offsetWidth,C=l.offsetWidth,k=setTimeout(()=>{document.body.removeChild(l),clearTimeout(k)},10);return C-$},L=()=>{const l=v.value.length||0;a.value>0?a.value--:a.value=l-1,m.value=0,s.value=1,u.value=0,d.value=0,n.x=0,n.y=0,i.value=0,c.value=0},A=()=>{const l=v.value.length||0;a.valueparseFloat(s.value.toFixed(1))),D=e.computed(()=>`${a.value+1}/${v.value.length}`);e.onMounted(()=>{g()});const Z=l=>l.scrollHeight>l.clientHeight;return e.watchEffect(()=>{r.value=t.modelValue,t.modelValue?(Z(document.body)&&(document.body.style.paddingRight=R()+"px"),document.body.style.overflow="hidden"):document.body.setAttribute("style","")}),e.watchEffect(()=>{const l=h(t.src);l==="string"?(a.value=0,m.value=0,s.value=1,u.value=0,d.value=0,n.x=0,n.y=0,i.value=0,c.value=0,v.value=[t.src]):l==="array"&&(t.initialIndex>=0&&t.initialIndex[t.flag?(e.openBlock(),e.createElementBlock("div",{key:0,class:"owl-preview",style:e.normalizeStyle({"z-index":t.zIndex})},[e.createElementVNode("div",{class:"owl-preview-canvas",onMousewheel:o[3]||(o[3]=(...n)=>t.handleMousewheel&&t.handleMousewheel(...n)),onDOMMouseScroll:o[4]||(o[4]=(...n)=>t.handleMousewheel&&t.handleMousewheel(...n))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.uri,(n,g)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:g},[t.active===g?(e.openBlock(),e.createElementBlock("div",{key:0,onMousemove:o[0]||(o[0]=(...p)=>t.handleMouseMove&&t.handleMouseMove(...p)),onMouseup:o[1]||(o[1]=(...p)=>t.mouseup&&t.mouseup(...p)),onMousedown:o[2]||(o[2]=(...p)=>t.mousedown&&t.mousedown(...p)),style:e.normalizeStyle([{transform:`rotate(${t.angle}deg) scale(${t.scale}) translate(${t.x}px,${t.y}px)`},{display:"inline-block"}])},[e.createElementVNode("img",{class:"owl-preview-image",src:n,alt:"\u88AB\u62D6\u62FD\u7684\u56FE\u7247",draggable:"false"},null,8,ze)],36)):e.createCommentVNode("",!0)],64))),128))],32),e.createElementVNode("div",{class:"owl-preview-close",style:e.normalizeStyle({"z-index":t.zIndex+1}),onClick:o[5]||(o[5]=(...n)=>t.close&&t.close(...n))},[e.createVNode(s)],4),t.uri&&t.uri.length>1?(e.openBlock(),e.createElementBlock("div",{key:0,class:"owl-preview-operate",style:e.normalizeStyle({"z-index":t.zIndex+1})},[e.createElementVNode("div",{class:"owl-preview-operate-item owl-preview-operate-item-left",onClick:o[6]||(o[6]=(...n)=>t.prev&&t.prev(...n))},[e.createVNode(i,{class:"owl-preview-operate-icon owl-preview-operate-icon-left"})]),e.createElementVNode("div",{class:"owl-preview-operate-item",onClick:o[7]||(o[7]=(...n)=>t.next&&t.next(...n))},[e.createVNode(i,{class:"owl-preview-operate-icon owl-preview-operate-icon"})])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"owl-preview-utils",style:e.normalizeStyle({"z-index":t.zIndex+1})},[e.createVNode(c,{title:"\u7F29\u5C0F",class:"owl-preview-utils-item",onClick:t.zoomOut},null,8,["onClick"]),e.createVNode(u,{title:"\u653E\u5927",class:"owl-preview-utils-item",onClick:t.enlarge},null,8,["onClick"]),e.createElementVNode("div",{title:"\u7F29\u653E\u500D\u6570",tabindex:"-1",class:"owl-preview-utils-item owl-preview-utils-scale",textContent:e.toDisplayString(t.getCurrScale)},null,8,Fe),t.uri&&t.uri.length>1?(e.openBlock(),e.createElementBlock("div",{key:0,title:"\u56FE\u7247\u4F4D\u7F6E",class:"owl-preview-utils-item owl-preview-utils-position",textContent:e.toDisplayString(t.getCurrIndex)},null,8,Se)):e.createCommentVNode("",!0),e.createVNode(d,{title:"\u5DE6\u65CB\u8F6C",class:"owl-preview-utils-item",onClick:t.clockwiseRotation},null,8,["onClick"]),e.createVNode(v,{title:"\u53F3\u65CB\u8F6C",class:"owl-preview-utils-item",onClick:t.anticlockwiseRotation},null,8,["onClick"])],4)],4)):e.createCommentVNode("",!0)]),_:1})])}const B=f(Ne,[["render",Ie]]),Re=t=>{t.component(B.name,B)},Le=B;exports.FoxPreviewImage=Le;exports.default=Re; +"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");function h(t){return Object.prototype.toString.call(t).replace(new RegExp("(^[[a-z]+ )([A-Za-z]+)(])","g"),"$2").toLowerCase()}const y=Object.create(null);function H(t){return h(t)==="object"}function P(t){return h(t)==="function"}function T(t){return h(t)==="array"}function W(t){return h(t)==="symbol"}function q(t){return[0,void 0,null].includes(t)}y.isObject=H;y.isFunction=P;y.isArray=T;y.isSymbol=W;y.isFalse=q;h.prototype=y;const w=(t,o)=>{const m=t.__vccOpts||t;for(const[p,_]of o)m[p]=_;return m},X={},Y={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},K=e.createElementVNode("path",{d:"M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"},null,-1),U=e.createElementVNode("path",{d:"M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"},null,-1),G=[K,U];function J(t,o){return e.openBlock(),e.createElementBlock("svg",Y,G)}const Q=w(X,[["render",J]]);const ee={},te={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},oe=e.createElementVNode("path",{d:"M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"},null,-1),le=e.createElementVNode("path",{d:"M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"},null,-1),ne=[oe,le];function ae(t,o){return e.openBlock(),e.createElementBlock("svg",te,ne)}const se=w(ee,[["render",ae]]);const re={},ie={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},ce=e.createElementVNode("path",{d:"M559.78666667 512L853.33333333 218.45333333c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0L512 464.21333333l-293.54666667-295.82222186c-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666l293.54666666 295.82222187-295.82222186 293.54666667c-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666 6.82666667 6.82666667 15.92888853 9.10222187 25.0311104 9.10222187s18.2044448-2.2755552 25.03111146-9.10222187L512 559.78666667 805.54666667 853.33333333c6.82666667 6.82666667 15.92888853 9.10222187 25.03111146 9.10222187s18.2044448-2.2755552 25.0311104-9.10222187c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666L559.78666667 512z"},null,-1),ue=[ce];function de(t,o){return e.openBlock(),e.createElementBlock("svg",ie,ue)}const ve=w(re,[["render",de]]);const me={},pe={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},_e=e.createElementVNode("path",{d:"M881.6703206 269.97378253a437.96818845 437.96818845 0 0 0-719.14189984-11.18481067V200.37940505a24.44088298 24.44088298 0 0 0-48.93354667 0v144.15978193c0 4.40143053 1.44988327 8.28504534 3.46936176 11.85796975a24.3373191 24.3373191 0 0 0 12.16866016 12.53113128c12.47934934 5.38527881 26.77105186 0 32.31167525-12.37578668a389.70780089 389.70780089 0 0 1 356.25693276-231.2045345 389.70780089 389.70780089 0 0 1 389.75958282 389.75958282c0 214.94513422-174.86622932 389.81136475-389.75958282 389.81136353a389.08642251 389.08642251 0 0 1-383.7011437-320.99370902 24.44088298 24.44088298 0 1 0-48.1568237 8.59573332 437.96818845 437.96818845 0 0 0 431.8579674 361.33152236c241.92331261 0 438.69312948-196.82159882 438.69312948-438.74491019 0-87.82147675-25.89076502-172.58784237-74.8243129-245.13376712"},null,-1),fe=[_e];function we(t,o){return e.openBlock(),e.createElementBlock("svg",pe,fe)}const he=w(me,[["render",we]]);const ye={},ge={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},ke=e.createElementVNode("path",{d:"M924.39230934 564.14465897a24.3373191 24.3373191 0 0 0-28.37627972 19.78054519A389.08642251 389.08642251 0 0 1 512.2631052 904.91891318c-214.94513422 0-389.81136475-174.86622932-389.81136476-389.81136353a389.70780089 389.70780089 0 0 1 713.03168-217.94846342c12.63469394 18.69313305 23.76772267 38.68080355 32.98483557 59.3934151 5.48884268 12.32400475 19.88410785 17.91641008 32.25989333 12.32400475a24.02662992 24.02662992 0 0 0 12.22044088-12.42756741 24.07841185 24.07841185 0 0 0 3.5211449-11.90975169V200.37940505a24.49266369 24.49266369 0 0 0-48.93354666 0v58.46134754a437.86462459 437.86462459 0 0 0-719.14190105 11.13302994A436.51830518 436.51830518 0 0 0 73.56997572 515.10754965c0 241.92331261 196.82159882 438.69312948 438.69312948 438.69312947a437.96818845 437.96818845 0 0 0 431.90974813-361.27974164 24.49266369 24.49266369 0 0 0-19.78054399-28.37627851"},null,-1),Ce=[ke];function $e(t,o){return e.openBlock(),e.createElementBlock("svg",ge,Ce)}const Ee=w(ye,[["render",$e]]);const Be={},be={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},Ve=e.createElementVNode("path",{d:"M325.3196818 850.33221435c-9.66522217-9.66522217-10.23376465-24.62036133-1.58203125-33.81591797l290.82183838-290.84655761c12.48321533-11.84051513 12.43377685-14.93041992 1e-8-27.36419678L323.73765055 207.50842285C315.06119792 198.31286621 315.65445964 183.35772705 325.3196818 173.69250489c9.83825684-9.83825684 25.18890381-10.38208008 34.33502198-1.26068116l323.03100586 323.03100586c3.97979737 3.97979737 5.75958252 9.14611817 6.08093262 14.51019288l-1e-8 4.05395507c-0.34606934 5.36407471-2.1258545 10.53039551-6.08093261 14.51019287L359.65470378 851.59289551C350.50858561 860.6895752 335.1332194 860.14575195 325.3196818 850.33221435z"},null,-1),xe=[Ve];function Me(t,o){return e.openBlock(),e.createElementBlock("svg",be,xe)}const Ne=w(Be,[["render",Me]]);const ze=e.defineComponent({name:"FoxPreviewImage",components:{ZoomOut:Q,ZoomIn:se,RotateLeft:he,RotateRight:Ee,Close:ve,ArrowRight:Ne},props:{modelValue:{type:Boolean,default:!1},src:{type:[String,Array],required:!0},zIndex:{type:Number,default:9e3},initialIndex:{type:Number,default:0}},setup(t,{emit:o}){const m=e.ref(null);let p=e.ref(!1),_=e.ref(0),r=t.src&&t.src.length?e.ref(t.initialIndex):e.ref(0),i=e.ref(0),s=e.ref(1),c=e.ref(0),u=e.ref(0),d=e.ref(0),v=e.ref(0),n=e.ref([]),a=e.reactive({x:0,y:0});const f=()=>{p.value=t.modelValue},V=()=>{p.value=!1,o("update:modelValue",p.value)},x=l=>{if(_.value===1){const{x:g,y:$}=l,k=g-a.x,C=$-a.y;d.value=k+d.value-c.value,v.value=C+v.value-u.value,requestAnimationFrame(()=>{c.value=k,u.value=C})}},B=()=>{s.value>.5&&(s.value-=.1)},b=()=>{s.value<2&&(s.value+=.1)},M=l=>{requestAnimationFrame(()=>{(l.wheelDelta||l.detail*-40)>0?b():B()})},N=x,z=M,F=()=>{_.value=0,c.value=0,u.value=0},S=l=>{_.value=1,a={x:l.x,y:l.y}},I=()=>{i.value+=90},R=()=>{i.value-=90},L=()=>{const l=document.createElement("div"),g=document.createElement("div");l.appendChild(g),l.style.width="100px",l.style.height="50px",l.style.overflow="scroll",l.style.marginLeft="-100000px",document.body.appendChild(l);const $=g.offsetWidth,k=l.offsetWidth,C=setTimeout(()=>{document.body.removeChild(l),clearTimeout(C)},10);return k-$},O=()=>{const l=n.value.length||0;r.value>0?r.value--:r.value=l-1,i.value=0,s.value=1,d.value=0,v.value=0,a.x=0,a.y=0,c.value=0,u.value=0},A=()=>{const l=n.value.length||0;r.valueparseFloat(s.value.toFixed(1))),Z=e.computed(()=>`${r.value+1}/${n.value.length}`);e.onMounted(()=>{f()});const j=l=>l.scrollHeight>window.innerHeight;return e.watchEffect(()=>{p.value=t.modelValue,t.modelValue?(m.value!==null&&m.value.focus(),j(document.body)&&(document.body.style.paddingRight=L()+"px",document.body.classList.add("fox-lock-window"))):(document.body.classList.remove("fox-lock-window"),document.body.style.paddingRight="0px")}),e.watchEffect(()=>{const l=h(t.src);l==="string"?(r.value=0,i.value=0,s.value=1,d.value=0,v.value=0,a.x=0,a.y=0,c.value=0,u.value=0,n.value=[t.src]):l==="array"&&(t.initialIndex>=0&&t.initialIndex[t.flag?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"refEl",class:"owl-preview",style:e.normalizeStyle({"z-index":t.zIndex}),tabindex:"1",onKeyup:o[8]||(o[8]=e.withKeys(e.withModifiers((...n)=>t.close&&t.close(...n),["exact"]),["esc"]))},[e.createElementVNode("div",{class:"owl-preview-canvas",onMousewheel:o[3]||(o[3]=(...n)=>t.handleMousewheel&&t.handleMousewheel(...n)),onDOMMouseScroll:o[4]||(o[4]=(...n)=>t.handleMousewheel&&t.handleMousewheel(...n))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.uri,(n,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:a},[t.active===a?(e.openBlock(),e.createElementBlock("div",{key:0,onMousemove:o[0]||(o[0]=(...f)=>t.handleMouseMove&&t.handleMouseMove(...f)),onMouseup:o[1]||(o[1]=(...f)=>t.mouseup&&t.mouseup(...f)),onMousedown:o[2]||(o[2]=(...f)=>t.mousedown&&t.mousedown(...f)),style:e.normalizeStyle([{transform:`rotate(${t.angle}deg) scale(${t.scale}) translate(${t.x}px,${t.y}px)`},{display:"inline-block"}])},[e.createElementVNode("img",{class:"owl-preview-image",src:n,alt:"\u88AB\u62D6\u62FD\u7684\u56FE\u7247",draggable:"false"},null,8,Fe)],36)):e.createCommentVNode("",!0)],64))),128))],32),e.createElementVNode("div",{class:"owl-preview-close",style:e.normalizeStyle({"z-index":t.zIndex+1}),onClick:o[5]||(o[5]=(...n)=>t.close&&t.close(...n))},[e.createVNode(i)],4),t.uri&&t.uri.length>1?(e.openBlock(),e.createElementBlock("div",{key:0,class:"owl-preview-operate",style:e.normalizeStyle({"z-index":t.zIndex+1})},[e.createElementVNode("div",{class:"owl-preview-operate-item owl-preview-operate-item-left",onClick:o[6]||(o[6]=(...n)=>t.prev&&t.prev(...n))},[e.createVNode(s,{class:"owl-preview-operate-icon owl-preview-operate-icon-left"})]),e.createElementVNode("div",{class:"owl-preview-operate-item",onClick:o[7]||(o[7]=(...n)=>t.next&&t.next(...n))},[e.createVNode(s,{class:"owl-preview-operate-icon owl-preview-operate-icon"})])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"owl-preview-utils",style:e.normalizeStyle({"z-index":t.zIndex+1})},[e.createVNode(c,{title:"\u7F29\u5C0F",class:"owl-preview-utils-item",onClick:t.zoomOut},null,8,["onClick"]),e.createVNode(u,{title:"\u653E\u5927",class:"owl-preview-utils-item",onClick:t.enlarge},null,8,["onClick"]),e.createElementVNode("div",{title:"\u7F29\u653E\u500D\u6570",tabindex:"-1",class:"owl-preview-utils-item owl-preview-utils-scale",textContent:e.toDisplayString(t.getCurrScale)},null,8,Se),t.uri&&t.uri.length>1?(e.openBlock(),e.createElementBlock("div",{key:0,title:"\u56FE\u7247\u4F4D\u7F6E",class:"owl-preview-utils-item owl-preview-utils-position",textContent:e.toDisplayString(t.getCurrIndex)},null,8,Ie)):e.createCommentVNode("",!0),e.createVNode(d,{title:"\u5DE6\u65CB\u8F6C",class:"owl-preview-utils-item",onClick:t.clockwiseRotation},null,8,["onClick"]),e.createVNode(v,{title:"\u53F3\u65CB\u8F6C",class:"owl-preview-utils-item",onClick:t.anticlockwiseRotation},null,8,["onClick"])],4)],36)):e.createCommentVNode("",!0)]),_:1})])}const E=w(ze,[["render",Re]]),Le=t=>{t.component(E.name,E)},Oe=E;exports.FoxPreviewImage=Oe;exports.default=Le; diff --git a/lib/preview-image.mjs b/lib/preview-image.mjs index ee9f1ab..5fdd243 100644 --- a/lib/preview-image.mjs +++ b/lib/preview-image.mjs @@ -1,117 +1,117 @@ -import { openBlock as a, createElementBlock as u, createElementVNode as n, defineComponent as K, ref as r, reactive as Q, computed as A, onMounted as ee, watchEffect as E, resolveComponent as $, createBlock as te, Teleport as oe, createVNode as w, Transition as le, withCtx as ne, normalizeStyle as M, Fragment as O, renderList as se, createCommentVNode as I, toDisplayString as V } from "vue"; -function C(e) { +import { openBlock as i, createElementBlock as c, createElementVNode as n, defineComponent as Q, ref as r, reactive as ee, computed as E, onMounted as te, watchEffect as A, resolveComponent as C, createBlock as oe, Teleport as le, createVNode as f, Transition as ne, withCtx as se, normalizeStyle as k, withKeys as ae, withModifiers as ie, Fragment as O, renderList as ue, createCommentVNode as I, toDisplayString as V } from "vue"; +function b(e) { return Object.prototype.toString.call(e).replace(new RegExp("(^[[a-z]+ )([A-Za-z]+)(])", "g"), "$2").toLowerCase(); } -const b = /* @__PURE__ */ Object.create(null); -function ae(e) { - return C(e) === "object"; +const x = /* @__PURE__ */ Object.create(null); +function re(e) { + return b(e) === "object"; } -function ie(e) { - return C(e) === "function"; +function ce(e) { + return b(e) === "function"; } -function ue(e) { - return C(e) === "array"; +function de(e) { + return b(e) === "array"; } -function re(e) { - return C(e) === "symbol"; +function ve(e) { + return b(e) === "symbol"; } -function ce(e) { +function me(e) { return [0, void 0, null].includes(e); } -b.isObject = ae; -b.isFunction = ie; -b.isArray = ue; -b.isSymbol = re; -b.isFalse = ce; -C.prototype = b; -const g = (e, t) => { - const c = e.__vccOpts || e; - for (const [f, s] of t) - c[f] = s; - return c; -}, de = {}, ve = { +x.isObject = re; +x.isFunction = ce; +x.isArray = de; +x.isSymbol = ve; +x.isFalse = me; +b.prototype = x; +const $ = (e, t) => { + const w = e.__vccOpts || e; + for (const [h, y] of t) + w[h] = y; + return w; +}, _e = {}, pe = { viewBox: "0 0 1024 1024", "aria-hidden": "true", "aria-role": "button", "aria-label": "\u653E\u5927", class: "svg" -}, _e = /* @__PURE__ */ n("path", { d: "M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z" }, null, -1), me = /* @__PURE__ */ n("path", { d: "M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z" }, null, -1), pe = [ - _e, - me +}, we = /* @__PURE__ */ n("path", { d: "M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z" }, null, -1), he = /* @__PURE__ */ n("path", { d: "M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z" }, null, -1), fe = [ + we, + he ]; -function he(e, t) { - return a(), u("svg", ve, pe); +function ye(e, t) { + return i(), c("svg", pe, fe); } -const we = /* @__PURE__ */ g(de, [["render", he]]); -const fe = {}, ye = { +const ge = /* @__PURE__ */ $(_e, [["render", ye]]); +const $e = {}, Ce = { viewBox: "0 0 1024 1024", "aria-hidden": "true", "aria-role": "button", "aria-label": "\u653E\u5927", class: "svg" -}, ge = /* @__PURE__ */ n("path", { d: "M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z" }, null, -1), $e = /* @__PURE__ */ n("path", { d: "M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z" }, null, -1), Ce = [ - ge, - $e +}, be = /* @__PURE__ */ n("path", { d: "M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z" }, null, -1), xe = /* @__PURE__ */ n("path", { d: "M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z" }, null, -1), Me = [ + be, + xe ]; -function be(e, t) { - return a(), u("svg", ye, Ce); +function ke(e, t) { + return i(), c("svg", Ce, Me); } -const xe = /* @__PURE__ */ g(fe, [["render", be]]); -const Me = {}, ke = { +const ze = /* @__PURE__ */ $($e, [["render", ke]]); +const Fe = {}, Ie = { viewBox: "0 0 1024 1024", "aria-hidden": "true", "aria-role": "button", "aria-label": "\u653E\u5927", class: "svg" -}, ze = /* @__PURE__ */ n("path", { d: "M559.78666667 512L853.33333333 218.45333333c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0L512 464.21333333l-293.54666667-295.82222186c-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666l293.54666666 295.82222187-295.82222186 293.54666667c-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666 6.82666667 6.82666667 15.92888853 9.10222187 25.0311104 9.10222187s18.2044448-2.2755552 25.03111146-9.10222187L512 559.78666667 805.54666667 853.33333333c6.82666667 6.82666667 15.92888853 9.10222187 25.03111146 9.10222187s18.2044448-2.2755552 25.0311104-9.10222187c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666L559.78666667 512z" }, null, -1), Fe = [ - ze +}, Re = /* @__PURE__ */ n("path", { d: "M559.78666667 512L853.33333333 218.45333333c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0L512 464.21333333l-293.54666667-295.82222186c-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666l293.54666666 295.82222187-295.82222186 293.54666667c-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666 6.82666667 6.82666667 15.92888853 9.10222187 25.0311104 9.10222187s18.2044448-2.2755552 25.03111146-9.10222187L512 559.78666667 805.54666667 853.33333333c6.82666667 6.82666667 15.92888853 9.10222187 25.03111146 9.10222187s18.2044448-2.2755552 25.0311104-9.10222187c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666L559.78666667 512z" }, null, -1), Se = [ + Re ]; -function Ie(e, t) { - return a(), u("svg", ke, Fe); +function Le(e, t) { + return i(), c("svg", Ie, Se); } -const Re = /* @__PURE__ */ g(Me, [["render", Ie]]); -const Se = {}, Be = { +const Be = /* @__PURE__ */ $(Fe, [["render", Le]]); +const Ee = {}, Ae = { viewBox: "0 0 1024 1024", "aria-hidden": "true", "aria-role": "button", "aria-label": "\u653E\u5927", class: "svg" -}, Le = /* @__PURE__ */ n("path", { d: "M881.6703206 269.97378253a437.96818845 437.96818845 0 0 0-719.14189984-11.18481067V200.37940505a24.44088298 24.44088298 0 0 0-48.93354667 0v144.15978193c0 4.40143053 1.44988327 8.28504534 3.46936176 11.85796975a24.3373191 24.3373191 0 0 0 12.16866016 12.53113128c12.47934934 5.38527881 26.77105186 0 32.31167525-12.37578668a389.70780089 389.70780089 0 0 1 356.25693276-231.2045345 389.70780089 389.70780089 0 0 1 389.75958282 389.75958282c0 214.94513422-174.86622932 389.81136475-389.75958282 389.81136353a389.08642251 389.08642251 0 0 1-383.7011437-320.99370902 24.44088298 24.44088298 0 1 0-48.1568237 8.59573332 437.96818845 437.96818845 0 0 0 431.8579674 361.33152236c241.92331261 0 438.69312948-196.82159882 438.69312948-438.74491019 0-87.82147675-25.89076502-172.58784237-74.8243129-245.13376712" }, null, -1), Ae = [ - Le +}, Oe = /* @__PURE__ */ n("path", { d: "M881.6703206 269.97378253a437.96818845 437.96818845 0 0 0-719.14189984-11.18481067V200.37940505a24.44088298 24.44088298 0 0 0-48.93354667 0v144.15978193c0 4.40143053 1.44988327 8.28504534 3.46936176 11.85796975a24.3373191 24.3373191 0 0 0 12.16866016 12.53113128c12.47934934 5.38527881 26.77105186 0 32.31167525-12.37578668a389.70780089 389.70780089 0 0 1 356.25693276-231.2045345 389.70780089 389.70780089 0 0 1 389.75958282 389.75958282c0 214.94513422-174.86622932 389.81136475-389.75958282 389.81136353a389.08642251 389.08642251 0 0 1-383.7011437-320.99370902 24.44088298 24.44088298 0 1 0-48.1568237 8.59573332 437.96818845 437.96818845 0 0 0 431.8579674 361.33152236c241.92331261 0 438.69312948-196.82159882 438.69312948-438.74491019 0-87.82147675-25.89076502-172.58784237-74.8243129-245.13376712" }, null, -1), Ve = [ + Oe ]; -function Ee(e, t) { - return a(), u("svg", Be, Ae); +function De(e, t) { + return i(), c("svg", Ae, Ve); } -const Oe = /* @__PURE__ */ g(Se, [["render", Ee]]); -const Ve = {}, De = { +const Ze = /* @__PURE__ */ $(Ee, [["render", De]]); +const je = {}, He = { viewBox: "0 0 1024 1024", "aria-hidden": "true", "aria-role": "button", "aria-label": "\u653E\u5927", class: "svg" -}, Ze = /* @__PURE__ */ n("path", { d: "M924.39230934 564.14465897a24.3373191 24.3373191 0 0 0-28.37627972 19.78054519A389.08642251 389.08642251 0 0 1 512.2631052 904.91891318c-214.94513422 0-389.81136475-174.86622932-389.81136476-389.81136353a389.70780089 389.70780089 0 0 1 713.03168-217.94846342c12.63469394 18.69313305 23.76772267 38.68080355 32.98483557 59.3934151 5.48884268 12.32400475 19.88410785 17.91641008 32.25989333 12.32400475a24.02662992 24.02662992 0 0 0 12.22044088-12.42756741 24.07841185 24.07841185 0 0 0 3.5211449-11.90975169V200.37940505a24.49266369 24.49266369 0 0 0-48.93354666 0v58.46134754a437.86462459 437.86462459 0 0 0-719.14190105 11.13302994A436.51830518 436.51830518 0 0 0 73.56997572 515.10754965c0 241.92331261 196.82159882 438.69312948 438.69312948 438.69312947a437.96818845 437.96818845 0 0 0 431.90974813-361.27974164 24.49266369 24.49266369 0 0 0-19.78054399-28.37627851" }, null, -1), je = [ - Ze +}, Ne = /* @__PURE__ */ n("path", { d: "M924.39230934 564.14465897a24.3373191 24.3373191 0 0 0-28.37627972 19.78054519A389.08642251 389.08642251 0 0 1 512.2631052 904.91891318c-214.94513422 0-389.81136475-174.86622932-389.81136476-389.81136353a389.70780089 389.70780089 0 0 1 713.03168-217.94846342c12.63469394 18.69313305 23.76772267 38.68080355 32.98483557 59.3934151 5.48884268 12.32400475 19.88410785 17.91641008 32.25989333 12.32400475a24.02662992 24.02662992 0 0 0 12.22044088-12.42756741 24.07841185 24.07841185 0 0 0 3.5211449-11.90975169V200.37940505a24.49266369 24.49266369 0 0 0-48.93354666 0v58.46134754a437.86462459 437.86462459 0 0 0-719.14190105 11.13302994A436.51830518 436.51830518 0 0 0 73.56997572 515.10754965c0 241.92331261 196.82159882 438.69312948 438.69312948 438.69312947a437.96818845 437.96818845 0 0 0 431.90974813-361.27974164 24.49266369 24.49266369 0 0 0-19.78054399-28.37627851" }, null, -1), We = [ + Ne ]; -function He(e, t) { - return a(), u("svg", De, je); +function Te(e, t) { + return i(), c("svg", He, We); } -const Ne = /* @__PURE__ */ g(Ve, [["render", He]]); -const We = {}, Te = { +const qe = /* @__PURE__ */ $(je, [["render", Te]]); +const Pe = {}, Xe = { viewBox: "0 0 1024 1024", "aria-hidden": "true", "aria-role": "button", "aria-label": "\u653E\u5927", class: "svg" -}, qe = /* @__PURE__ */ n("path", { d: "M325.3196818 850.33221435c-9.66522217-9.66522217-10.23376465-24.62036133-1.58203125-33.81591797l290.82183838-290.84655761c12.48321533-11.84051513 12.43377685-14.93041992 1e-8-27.36419678L323.73765055 207.50842285C315.06119792 198.31286621 315.65445964 183.35772705 325.3196818 173.69250489c9.83825684-9.83825684 25.18890381-10.38208008 34.33502198-1.26068116l323.03100586 323.03100586c3.97979737 3.97979737 5.75958252 9.14611817 6.08093262 14.51019288l-1e-8 4.05395507c-0.34606934 5.36407471-2.1258545 10.53039551-6.08093261 14.51019287L359.65470378 851.59289551C350.50858561 860.6895752 335.1332194 860.14575195 325.3196818 850.33221435z" }, null, -1), Pe = [ - qe +}, Ye = /* @__PURE__ */ n("path", { d: "M325.3196818 850.33221435c-9.66522217-9.66522217-10.23376465-24.62036133-1.58203125-33.81591797l290.82183838-290.84655761c12.48321533-11.84051513 12.43377685-14.93041992 1e-8-27.36419678L323.73765055 207.50842285C315.06119792 198.31286621 315.65445964 183.35772705 325.3196818 173.69250489c9.83825684-9.83825684 25.18890381-10.38208008 34.33502198-1.26068116l323.03100586 323.03100586c3.97979737 3.97979737 5.75958252 9.14611817 6.08093262 14.51019288l-1e-8 4.05395507c-0.34606934 5.36407471-2.1258545 10.53039551-6.08093261 14.51019287L359.65470378 851.59289551C350.50858561 860.6895752 335.1332194 860.14575195 325.3196818 850.33221435z" }, null, -1), Ke = [ + Ye ]; -function Xe(e, t) { - return a(), u("svg", Te, Pe); +function Ue(e, t) { + return i(), c("svg", Xe, Ke); } -const Ye = /* @__PURE__ */ g(We, [["render", Xe]]); -const Ue = K({ +const Ge = /* @__PURE__ */ $(Pe, [["render", Ue]]); +const Je = Q({ name: "FoxPreviewImage", - components: { ZoomOut: we, ZoomIn: xe, RotateLeft: Oe, RotateRight: Ne, Close: Re, ArrowRight: Ye }, + components: { ZoomOut: ge, ZoomIn: ze, RotateLeft: Ze, RotateRight: qe, Close: Be, ArrowRight: Ge }, props: { modelValue: { type: Boolean, @@ -131,109 +131,114 @@ const Ue = K({ } }, setup(e, { emit: t }) { - let c = r(!1), f = r(0), s = e.src && e.src.length ? r(e.initialIndex) : r(0), h = r(0), i = r(1), d = r(0), v = r(0), _ = r(0), m = r(0), p = r([]), l = Q({ + const w = r(null); + let h = r(!1), y = r(0), u = e.src && e.src.length ? r(e.initialIndex) : r(0), d = r(0), a = r(1), v = r(0), m = r(0), _ = r(0), p = r(0), l = r([]), s = ee({ x: 0, y: 0 }); - const k = () => { - c.value = e.modelValue; - }, y = () => { - c.value = !1, t("update:modelValue", c.value); - }, D = (o) => { - if (f.value === 1) { - const { x, y: R } = o, z = x - l.x, F = R - l.y; - _.value = z + _.value - d.value, m.value = F + m.value - v.value, requestAnimationFrame(() => { - d.value = z, v.value = F; + const g = () => { + h.value = e.modelValue; + }, D = () => { + h.value = !1, t("update:modelValue", h.value); + }, Z = (o) => { + if (y.value === 1) { + const { x: M, y: R } = o, z = M - s.x, F = R - s.y; + _.value = z + _.value - v.value, p.value = F + p.value - m.value, requestAnimationFrame(() => { + v.value = z, m.value = F; }); } - }, B = () => { - i.value > 0.5 && (i.value -= 0.1); }, L = () => { - i.value < 2 && (i.value += 0.1); - }, Z = (o) => { + a.value > 0.5 && (a.value -= 0.1); + }, B = () => { + a.value < 2 && (a.value += 0.1); + }, j = (o) => { requestAnimationFrame(() => { - (o.wheelDelta || o.detail * -40) > 0 ? L() : B(); + (o.wheelDelta || o.detail * -40) > 0 ? B() : L(); }); - }, j = D, H = Z, N = () => { - f.value = 0, d.value = 0, v.value = 0; - }, W = (o) => { - f.value = 1, l = { x: o.x, y: o.y }; - }, T = () => { - h.value += 90; + }, H = Z, N = j, W = () => { + y.value = 0, v.value = 0, m.value = 0; + }, T = (o) => { + y.value = 1, s = { x: o.x, y: o.y }; }, q = () => { - h.value -= 90; + d.value += 90; }, P = () => { - const o = document.createElement("div"), x = document.createElement("div"); - o.appendChild(x), o.style.width = "100px", o.style.height = "50px", o.style.overflow = "scroll", o.style.marginLeft = "-100000px", document.body.appendChild(o); - const R = x.offsetWidth, z = o.offsetWidth, F = setTimeout(() => { + d.value -= 90; + }, X = () => { + const o = document.createElement("div"), M = document.createElement("div"); + o.appendChild(M), o.style.width = "100px", o.style.height = "50px", o.style.overflow = "scroll", o.style.marginLeft = "-100000px", document.body.appendChild(o); + const R = M.offsetWidth, z = o.offsetWidth, F = setTimeout(() => { document.body.removeChild(o), clearTimeout(F); }, 10); return z - R; - }, X = () => { - const o = p.value.length || 0; - s.value > 0 ? s.value-- : s.value = o - 1, h.value = 0, i.value = 1, _.value = 0, m.value = 0, l.x = 0, l.y = 0, d.value = 0, v.value = 0; }, Y = () => { - const o = p.value.length || 0; - s.value < o - 1 ? s.value++ : s.value = 0, h.value = 0, i.value = 1, _.value = 0, m.value = 0, l.x = 0, l.y = 0, d.value = 0, v.value = 0; - }, U = A(() => parseFloat(i.value.toFixed(1))), G = A(() => `${s.value + 1}/${p.value.length}`); - ee(() => { - k(); + const o = l.value.length || 0; + u.value > 0 ? u.value-- : u.value = o - 1, d.value = 0, a.value = 1, _.value = 0, p.value = 0, s.x = 0, s.y = 0, v.value = 0, m.value = 0; + }, K = () => { + const o = l.value.length || 0; + u.value < o - 1 ? u.value++ : u.value = 0, d.value = 0, a.value = 1, _.value = 0, p.value = 0, s.x = 0, s.y = 0, v.value = 0, m.value = 0; + }, U = E(() => parseFloat(a.value.toFixed(1))), G = E(() => `${u.value + 1}/${l.value.length}`); + te(() => { + g(); }); - const J = (o) => o.scrollHeight > o.clientHeight; - return E(() => { - c.value = e.modelValue, e.modelValue ? (J(document.body) && (document.body.style.paddingRight = P() + "px"), document.body.style.overflow = "hidden") : document.body.setAttribute("style", ""); - }), E(() => { - const o = C(e.src); - o === "string" ? (s.value = 0, h.value = 0, i.value = 1, _.value = 0, m.value = 0, l.x = 0, l.y = 0, d.value = 0, v.value = 0, p.value = [e.src]) : o === "array" && (e.initialIndex >= 0 && e.initialIndex < e.src.length ? s.value = e.initialIndex : s.value = 0, p.value = e.src, h.value = 0, i.value = 1, _.value = 0, m.value = 0, l.x = 0, l.y = 0, d.value = 0, v.value = 0, p.value = e.src); + const J = (o) => o.scrollHeight > window.innerHeight; + return A(() => { + h.value = e.modelValue, e.modelValue ? (w.value !== null && w.value.focus(), J(document.body) && (document.body.style.paddingRight = X() + "px", document.body.classList.add("fox-lock-window"))) : (document.body.classList.remove("fox-lock-window"), document.body.style.paddingRight = "0px"); + }), A(() => { + const o = b(e.src); + o === "string" ? (u.value = 0, d.value = 0, a.value = 1, _.value = 0, p.value = 0, s.x = 0, s.y = 0, v.value = 0, m.value = 0, l.value = [e.src]) : o === "array" && (e.initialIndex >= 0 && e.initialIndex < e.src.length ? u.value = e.initialIndex : u.value = 0, l.value = e.src, d.value = 0, a.value = 1, _.value = 0, p.value = 0, s.x = 0, s.y = 0, v.value = 0, m.value = 0, l.value = e.src); }), { - flag: c, - status: f, - active: s, - uri: p, - scale: i, - angle: h, + refEl: w, + flag: h, + status: y, + active: u, + uri: l, + scale: a, + angle: d, x: _, - y: m, - handleMouseMove: j, - handleMousewheel: H, - close: y, - prev: X, - next: Y, - mouseup: N, - mousedown: W, - zoomOut: B, - enlarge: L, - anticlockwiseRotation: q, - clockwiseRotation: T, + y: p, + handleMouseMove: H, + handleMousewheel: N, + close: D, + prev: Y, + next: K, + mouseup: W, + mousedown: T, + zoomOut: L, + enlarge: B, + anticlockwiseRotation: P, + clockwiseRotation: q, getCurrScale: U, getCurrIndex: G }; } -}), Ge = ["src"], Je = ["textContent"], Ke = ["textContent"]; -function Qe(e, t, c, f, s, h) { - const i = $("Close"), d = $("ArrowRight"), v = $("ZoomOut"), _ = $("ZoomIn"), m = $("RotateLeft"), p = $("RotateRight"); - return a(), te(oe, { to: "body" }, [ - w(le, null, { - default: ne(() => [ - e.flag ? (a(), u("div", { +}), Qe = ["src"], e3 = ["textContent"], t3 = ["textContent"]; +function o3(e, t, w, h, y, u) { + const d = C("Close"), a = C("ArrowRight"), v = C("ZoomOut"), m = C("ZoomIn"), _ = C("RotateLeft"), p = C("RotateRight"); + return i(), oe(le, { to: "body" }, [ + f(ne, null, { + default: se(() => [ + e.flag ? (i(), c("div", { key: 0, + ref: "refEl", class: "owl-preview", - style: M({ + style: k({ "z-index": e.zIndex - }) + }), + tabindex: "1", + onKeyup: t[8] || (t[8] = ae(ie((...l) => e.close && e.close(...l), ["exact"]), ["esc"])) }, [ n("div", { class: "owl-preview-canvas", onMousewheel: t[3] || (t[3] = (...l) => e.handleMousewheel && e.handleMousewheel(...l)), onDOMMouseScroll: t[4] || (t[4] = (...l) => e.handleMousewheel && e.handleMousewheel(...l)) }, [ - (a(!0), u(O, null, se(e.uri, (l, k) => (a(), u(O, { key: k }, [ - e.active === k ? (a(), u("div", { + (i(!0), c(O, null, ue(e.uri, (l, s) => (i(), c(O, { key: s }, [ + e.active === s ? (i(), c("div", { key: 0, - onMousemove: t[0] || (t[0] = (...y) => e.handleMouseMove && e.handleMouseMove(...y)), - onMouseup: t[1] || (t[1] = (...y) => e.mouseup && e.mouseup(...y)), - onMousedown: t[2] || (t[2] = (...y) => e.mousedown && e.mousedown(...y)), - style: M([{ + onMousemove: t[0] || (t[0] = (...g) => e.handleMouseMove && e.handleMouseMove(...g)), + onMouseup: t[1] || (t[1] = (...g) => e.mouseup && e.mouseup(...g)), + onMousedown: t[2] || (t[2] = (...g) => e.mousedown && e.mousedown(...g)), + style: k([{ transform: `rotate(${e.angle}deg) scale(${e.scale}) translate(${e.x}px,${e.y}px)` }, { display: "inline-block" }]) }, [ @@ -242,45 +247,45 @@ function Qe(e, t, c, f, s, h) { src: l, alt: "\u88AB\u62D6\u62FD\u7684\u56FE\u7247", draggable: "false" - }, null, 8, Ge) + }, null, 8, Qe) ], 36)) : I("", !0) ], 64))), 128)) ], 32), n("div", { class: "owl-preview-close", - style: M({ "z-index": e.zIndex + 1 }), + style: k({ "z-index": e.zIndex + 1 }), onClick: t[5] || (t[5] = (...l) => e.close && e.close(...l)) }, [ - w(i) + f(d) ], 4), - e.uri && e.uri.length > 1 ? (a(), u("div", { + e.uri && e.uri.length > 1 ? (i(), c("div", { key: 0, class: "owl-preview-operate", - style: M({ "z-index": e.zIndex + 1 }) + style: k({ "z-index": e.zIndex + 1 }) }, [ n("div", { class: "owl-preview-operate-item owl-preview-operate-item-left", onClick: t[6] || (t[6] = (...l) => e.prev && e.prev(...l)) }, [ - w(d, { class: "owl-preview-operate-icon owl-preview-operate-icon-left" }) + f(a, { class: "owl-preview-operate-icon owl-preview-operate-icon-left" }) ]), n("div", { class: "owl-preview-operate-item", onClick: t[7] || (t[7] = (...l) => e.next && e.next(...l)) }, [ - w(d, { class: "owl-preview-operate-icon owl-preview-operate-icon" }) + f(a, { class: "owl-preview-operate-icon owl-preview-operate-icon" }) ]) ], 4)) : I("", !0), n("div", { class: "owl-preview-utils", - style: M({ "z-index": e.zIndex + 1 }) + style: k({ "z-index": e.zIndex + 1 }) }, [ - w(v, { + f(v, { title: "\u7F29\u5C0F", class: "owl-preview-utils-item", onClick: e.zoomOut }, null, 8, ["onClick"]), - w(_, { + f(m, { title: "\u653E\u5927", class: "owl-preview-utils-item", onClick: e.enlarge @@ -290,34 +295,34 @@ function Qe(e, t, c, f, s, h) { tabindex: "-1", class: "owl-preview-utils-item owl-preview-utils-scale", textContent: V(e.getCurrScale) - }, null, 8, Je), - e.uri && e.uri.length > 1 ? (a(), u("div", { + }, null, 8, e3), + e.uri && e.uri.length > 1 ? (i(), c("div", { key: 0, title: "\u56FE\u7247\u4F4D\u7F6E", class: "owl-preview-utils-item owl-preview-utils-position", textContent: V(e.getCurrIndex) - }, null, 8, Ke)) : I("", !0), - w(m, { + }, null, 8, t3)) : I("", !0), + f(_, { title: "\u5DE6\u65CB\u8F6C", class: "owl-preview-utils-item", onClick: e.clockwiseRotation }, null, 8, ["onClick"]), - w(p, { + f(p, { title: "\u53F3\u65CB\u8F6C", class: "owl-preview-utils-item", onClick: e.anticlockwiseRotation }, null, 8, ["onClick"]) ], 4) - ], 4)) : I("", !0) + ], 36)) : I("", !0) ]), _: 1 }) ]); } -const S = /* @__PURE__ */ g(Ue, [["render", Qe]]), t3 = (e) => { +const S = /* @__PURE__ */ $(Je, [["render", o3]]), n3 = (e) => { e.component(S.name, S); -}, o3 = S; +}, s3 = S; export { - o3 as FoxPreviewImage, - t3 as default + s3 as FoxPreviewImage, + n3 as default }; diff --git a/lib/preview-image.umd.js b/lib/preview-image.umd.js index ace3fa5..6eeb84c 100644 --- a/lib/preview-image.umd.js +++ b/lib/preview-image.umd.js @@ -1 +1 @@ -(function(_,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(_=typeof globalThis<"u"?globalThis:_||self,e(_.foxPreviewImage={},_.Vue))})(this,function(_,e){"use strict";function y(t){return Object.prototype.toString.call(t).replace(new RegExp("(^[[a-z]+ )([A-Za-z]+)(])","g"),"$2").toLowerCase()}const v=Object.create(null);function x(t){return y(t)==="object"}function M(t){return y(t)==="function"}function N(t){return y(t)==="array"}function z(t){return y(t)==="symbol"}function F(t){return[0,void 0,null].includes(t)}v.isObject=x,v.isFunction=M,v.isArray=N,v.isSymbol=z,v.isFalse=F,y.prototype=v;const Ne="",f=(t,o)=>{const i=t.__vccOpts||t;for(const[h,a]of o)i[h]=a;return i},S={},I={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},R=[e.createElementVNode("path",{d:"M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"},null,-1),e.createElementVNode("path",{d:"M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"},null,-1)];function L(t,o){return e.openBlock(),e.createElementBlock("svg",I,R)}const A=f(S,[["render",L]]),Se="",O={},D={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},j=[e.createElementVNode("path",{d:"M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"},null,-1),e.createElementVNode("path",{d:"M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"},null,-1)];function T(t,o){return e.openBlock(),e.createElementBlock("svg",D,j)}const Z=f(O,[["render",T]]),Le="",P={},H={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},W=[e.createElementVNode("path",{d:"M559.78666667 512L853.33333333 218.45333333c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0L512 464.21333333l-293.54666667-295.82222186c-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666l293.54666666 295.82222187-295.82222186 293.54666667c-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666 6.82666667 6.82666667 15.92888853 9.10222187 25.0311104 9.10222187s18.2044448-2.2755552 25.03111146-9.10222187L512 559.78666667 805.54666667 853.33333333c6.82666667 6.82666667 15.92888853 9.10222187 25.03111146 9.10222187s18.2044448-2.2755552 25.0311104-9.10222187c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666L559.78666667 512z"},null,-1)];function q(t,o){return e.openBlock(),e.createElementBlock("svg",H,W)}const X=f(P,[["render",q]]),Oe="",Y={},U={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},G=[e.createElementVNode("path",{d:"M881.6703206 269.97378253a437.96818845 437.96818845 0 0 0-719.14189984-11.18481067V200.37940505a24.44088298 24.44088298 0 0 0-48.93354667 0v144.15978193c0 4.40143053 1.44988327 8.28504534 3.46936176 11.85796975a24.3373191 24.3373191 0 0 0 12.16866016 12.53113128c12.47934934 5.38527881 26.77105186 0 32.31167525-12.37578668a389.70780089 389.70780089 0 0 1 356.25693276-231.2045345 389.70780089 389.70780089 0 0 1 389.75958282 389.75958282c0 214.94513422-174.86622932 389.81136475-389.75958282 389.81136353a389.08642251 389.08642251 0 0 1-383.7011437-320.99370902 24.44088298 24.44088298 0 1 0-48.1568237 8.59573332 437.96818845 437.96818845 0 0 0 431.8579674 361.33152236c241.92331261 0 438.69312948-196.82159882 438.69312948-438.74491019 0-87.82147675-25.89076502-172.58784237-74.8243129-245.13376712"},null,-1)];function J(t,o){return e.openBlock(),e.createElementBlock("svg",U,G)}const K=f(Y,[["render",J]]),je="",Q={},ee={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},te=[e.createElementVNode("path",{d:"M924.39230934 564.14465897a24.3373191 24.3373191 0 0 0-28.37627972 19.78054519A389.08642251 389.08642251 0 0 1 512.2631052 904.91891318c-214.94513422 0-389.81136475-174.86622932-389.81136476-389.81136353a389.70780089 389.70780089 0 0 1 713.03168-217.94846342c12.63469394 18.69313305 23.76772267 38.68080355 32.98483557 59.3934151 5.48884268 12.32400475 19.88410785 17.91641008 32.25989333 12.32400475a24.02662992 24.02662992 0 0 0 12.22044088-12.42756741 24.07841185 24.07841185 0 0 0 3.5211449-11.90975169V200.37940505a24.49266369 24.49266369 0 0 0-48.93354666 0v58.46134754a437.86462459 437.86462459 0 0 0-719.14190105 11.13302994A436.51830518 436.51830518 0 0 0 73.56997572 515.10754965c0 241.92331261 196.82159882 438.69312948 438.69312948 438.69312947a437.96818845 437.96818845 0 0 0 431.90974813-361.27974164 24.49266369 24.49266369 0 0 0-19.78054399-28.37627851"},null,-1)];function oe(t,o){return e.openBlock(),e.createElementBlock("svg",ee,te)}const le=f(Q,[["render",oe]]),Ze="",ne={},ae={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},se=[e.createElementVNode("path",{d:"M325.3196818 850.33221435c-9.66522217-9.66522217-10.23376465-24.62036133-1.58203125-33.81591797l290.82183838-290.84655761c12.48321533-11.84051513 12.43377685-14.93041992 1e-8-27.36419678L323.73765055 207.50842285C315.06119792 198.31286621 315.65445964 183.35772705 325.3196818 173.69250489c9.83825684-9.83825684 25.18890381-10.38208008 34.33502198-1.26068116l323.03100586 323.03100586c3.97979737 3.97979737 5.75958252 9.14611817 6.08093262 14.51019288l-1e-8 4.05395507c-0.34606934 5.36407471-2.1258545 10.53039551-6.08093261 14.51019287L359.65470378 851.59289551C350.50858561 860.6895752 335.1332194 860.14575195 325.3196818 850.33221435z"},null,-1)];function ie(t,o){return e.openBlock(),e.createElementBlock("svg",ae,se)}const re=f(ne,[["render",ie]]),He="",ce=e.defineComponent({name:"FoxPreviewImage",components:{ZoomOut:A,ZoomIn:Z,RotateLeft:K,RotateRight:le,Close:X,ArrowRight:re},props:{modelValue:{type:Boolean,default:!1},src:{type:[String,Array],required:!0},zIndex:{type:Number,default:9e3},initialIndex:{type:Number,default:0}},setup(t,{emit:o}){let i=e.ref(!1),h=e.ref(0),a=t.src&&t.src.length?e.ref(t.initialIndex):e.ref(0),p=e.ref(0),s=e.ref(1),r=e.ref(0),c=e.ref(0),d=e.ref(0),u=e.ref(0),m=e.ref([]),n=e.reactive({x:0,y:0});const $=()=>{i.value=t.modelValue},w=()=>{i.value=!1,o("update:modelValue",i.value)},he=l=>{if(h.value===1){const{x:g,y:E}=l,C=g-n.x,k=E-n.y;d.value=C+d.value-r.value,u.value=k+u.value-c.value,requestAnimationFrame(()=>{r.value=C,c.value=k})}},V=()=>{s.value>.5&&(s.value-=.1)},b=()=>{s.value<2&&(s.value+=.1)},we=l=>{requestAnimationFrame(()=>{(l.wheelDelta||l.detail*-40)>0?b():V()})},ye=he,ve=we,ge=()=>{h.value=0,r.value=0,c.value=0},$e=l=>{h.value=1,n={x:l.x,y:l.y}},Ce=()=>{p.value+=90},ke=()=>{p.value-=90},Be=()=>{const l=document.createElement("div"),g=document.createElement("div");l.appendChild(g),l.style.width="100px",l.style.height="50px",l.style.overflow="scroll",l.style.marginLeft="-100000px",document.body.appendChild(l);const E=g.offsetWidth,C=l.offsetWidth,k=setTimeout(()=>{document.body.removeChild(l),clearTimeout(k)},10);return C-E},Ee=()=>{const l=m.value.length||0;a.value>0?a.value--:a.value=l-1,p.value=0,s.value=1,d.value=0,u.value=0,n.x=0,n.y=0,r.value=0,c.value=0},Ve=()=>{const l=m.value.length||0;a.valueparseFloat(s.value.toFixed(1))),xe=e.computed(()=>`${a.value+1}/${m.value.length}`);e.onMounted(()=>{$()});const Me=l=>l.scrollHeight>l.clientHeight;return e.watchEffect(()=>{i.value=t.modelValue,t.modelValue?(Me(document.body)&&(document.body.style.paddingRight=Be()+"px"),document.body.style.overflow="hidden"):document.body.setAttribute("style","")}),e.watchEffect(()=>{const l=y(t.src);l==="string"?(a.value=0,p.value=0,s.value=1,d.value=0,u.value=0,n.x=0,n.y=0,r.value=0,c.value=0,m.value=[t.src]):l==="array"&&(t.initialIndex>=0&&t.initialIndex[t.flag?(e.openBlock(),e.createElementBlock("div",{key:0,class:"owl-preview",style:e.normalizeStyle({"z-index":t.zIndex})},[e.createElementVNode("div",{class:"owl-preview-canvas",onMousewheel:o[3]||(o[3]=(...n)=>t.handleMousewheel&&t.handleMousewheel(...n)),onDOMMouseScroll:o[4]||(o[4]=(...n)=>t.handleMousewheel&&t.handleMousewheel(...n))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.uri,(n,$)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:$},[t.active===$?(e.openBlock(),e.createElementBlock("div",{key:0,onMousemove:o[0]||(o[0]=(...w)=>t.handleMouseMove&&t.handleMouseMove(...w)),onMouseup:o[1]||(o[1]=(...w)=>t.mouseup&&t.mouseup(...w)),onMousedown:o[2]||(o[2]=(...w)=>t.mousedown&&t.mousedown(...w)),style:e.normalizeStyle([{transform:`rotate(${t.angle}deg) scale(${t.scale}) translate(${t.x}px,${t.y}px)`},{display:"inline-block"}])},[e.createElementVNode("img",{class:"owl-preview-image",src:n,alt:"\u88AB\u62D6\u62FD\u7684\u56FE\u7247",draggable:"false"},null,8,de)],36)):e.createCommentVNode("",!0)],64))),128))],32),e.createElementVNode("div",{class:"owl-preview-close",style:e.normalizeStyle({"z-index":t.zIndex+1}),onClick:o[5]||(o[5]=(...n)=>t.close&&t.close(...n))},[e.createVNode(s)],4),t.uri&&t.uri.length>1?(e.openBlock(),e.createElementBlock("div",{key:0,class:"owl-preview-operate",style:e.normalizeStyle({"z-index":t.zIndex+1})},[e.createElementVNode("div",{class:"owl-preview-operate-item owl-preview-operate-item-left",onClick:o[6]||(o[6]=(...n)=>t.prev&&t.prev(...n))},[e.createVNode(r,{class:"owl-preview-operate-icon owl-preview-operate-icon-left"})]),e.createElementVNode("div",{class:"owl-preview-operate-item",onClick:o[7]||(o[7]=(...n)=>t.next&&t.next(...n))},[e.createVNode(r,{class:"owl-preview-operate-icon owl-preview-operate-icon"})])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"owl-preview-utils",style:e.normalizeStyle({"z-index":t.zIndex+1})},[e.createVNode(c,{title:"\u7F29\u5C0F",class:"owl-preview-utils-item",onClick:t.zoomOut},null,8,["onClick"]),e.createVNode(d,{title:"\u653E\u5927",class:"owl-preview-utils-item",onClick:t.enlarge},null,8,["onClick"]),e.createElementVNode("div",{title:"\u7F29\u653E\u500D\u6570",tabindex:"-1",class:"owl-preview-utils-item owl-preview-utils-scale",textContent:e.toDisplayString(t.getCurrScale)},null,8,ue),t.uri&&t.uri.length>1?(e.openBlock(),e.createElementBlock("div",{key:0,title:"\u56FE\u7247\u4F4D\u7F6E",class:"owl-preview-utils-item owl-preview-utils-position",textContent:e.toDisplayString(t.getCurrIndex)},null,8,me)):e.createCommentVNode("",!0),e.createVNode(u,{title:"\u5DE6\u65CB\u8F6C",class:"owl-preview-utils-item",onClick:t.clockwiseRotation},null,8,["onClick"]),e.createVNode(m,{title:"\u53F3\u65CB\u8F6C",class:"owl-preview-utils-item",onClick:t.anticlockwiseRotation},null,8,["onClick"])],4)],4)):e.createCommentVNode("",!0)]),_:1})])}const B=f(ce,[["render",_e]]),pe=t=>{t.component(B.name,B)},fe=B;_.FoxPreviewImage=fe,_.default=pe,Object.defineProperties(_,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); +(function(_,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(_=typeof globalThis<"u"?globalThis:_||self,e(_.foxPreviewImage={},_.Vue))})(this,function(_,e){"use strict";function v(t){return Object.prototype.toString.call(t).replace(new RegExp("(^[[a-z]+ )([A-Za-z]+)(])","g"),"$2").toLowerCase()}const g=Object.create(null);function V(t){return v(t)==="object"}function M(t){return v(t)==="function"}function N(t){return v(t)==="array"}function z(t){return v(t)==="symbol"}function F(t){return[0,void 0,null].includes(t)}g.isObject=V,g.isFunction=M,g.isArray=N,g.isSymbol=z,g.isFalse=F,v.prototype=g;const ze="",h=(t,o)=>{const p=t.__vccOpts||t;for(const[f,w]of o)p[f]=w;return p},S={},I={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},R=[e.createElementVNode("path",{d:"M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"},null,-1),e.createElementVNode("path",{d:"M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"},null,-1)];function L(t,o){return e.openBlock(),e.createElementBlock("svg",I,R)}const O=h(S,[["render",L]]),Ie="",A={},D={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},j=[e.createElementVNode("path",{d:"M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"},null,-1),e.createElementVNode("path",{d:"M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"},null,-1)];function T(t,o){return e.openBlock(),e.createElementBlock("svg",D,j)}const Z=h(A,[["render",T]]),Oe="",P={},H={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},W=[e.createElementVNode("path",{d:"M559.78666667 512L853.33333333 218.45333333c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0L512 464.21333333l-293.54666667-295.82222186c-13.65333333-13.65333333-34.13333333-13.65333333-47.78666666 0-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666l293.54666666 295.82222187-295.82222186 293.54666667c-13.65333333 13.65333333-13.65333333 34.13333333 0 47.78666666 6.82666667 6.82666667 15.92888853 9.10222187 25.0311104 9.10222187s18.2044448-2.2755552 25.03111146-9.10222187L512 559.78666667 805.54666667 853.33333333c6.82666667 6.82666667 15.92888853 9.10222187 25.03111146 9.10222187s18.2044448-2.2755552 25.0311104-9.10222187c13.65333333-13.65333333 13.65333333-34.13333333 0-47.78666666L559.78666667 512z"},null,-1)];function q(t,o){return e.openBlock(),e.createElementBlock("svg",H,W)}const X=h(P,[["render",q]]),De="",Y={},K={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},U=[e.createElementVNode("path",{d:"M881.6703206 269.97378253a437.96818845 437.96818845 0 0 0-719.14189984-11.18481067V200.37940505a24.44088298 24.44088298 0 0 0-48.93354667 0v144.15978193c0 4.40143053 1.44988327 8.28504534 3.46936176 11.85796975a24.3373191 24.3373191 0 0 0 12.16866016 12.53113128c12.47934934 5.38527881 26.77105186 0 32.31167525-12.37578668a389.70780089 389.70780089 0 0 1 356.25693276-231.2045345 389.70780089 389.70780089 0 0 1 389.75958282 389.75958282c0 214.94513422-174.86622932 389.81136475-389.75958282 389.81136353a389.08642251 389.08642251 0 0 1-383.7011437-320.99370902 24.44088298 24.44088298 0 1 0-48.1568237 8.59573332 437.96818845 437.96818845 0 0 0 431.8579674 361.33152236c241.92331261 0 438.69312948-196.82159882 438.69312948-438.74491019 0-87.82147675-25.89076502-172.58784237-74.8243129-245.13376712"},null,-1)];function G(t,o){return e.openBlock(),e.createElementBlock("svg",K,U)}const J=h(Y,[["render",G]]),Te="",Q={},ee={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},te=[e.createElementVNode("path",{d:"M924.39230934 564.14465897a24.3373191 24.3373191 0 0 0-28.37627972 19.78054519A389.08642251 389.08642251 0 0 1 512.2631052 904.91891318c-214.94513422 0-389.81136475-174.86622932-389.81136476-389.81136353a389.70780089 389.70780089 0 0 1 713.03168-217.94846342c12.63469394 18.69313305 23.76772267 38.68080355 32.98483557 59.3934151 5.48884268 12.32400475 19.88410785 17.91641008 32.25989333 12.32400475a24.02662992 24.02662992 0 0 0 12.22044088-12.42756741 24.07841185 24.07841185 0 0 0 3.5211449-11.90975169V200.37940505a24.49266369 24.49266369 0 0 0-48.93354666 0v58.46134754a437.86462459 437.86462459 0 0 0-719.14190105 11.13302994A436.51830518 436.51830518 0 0 0 73.56997572 515.10754965c0 241.92331261 196.82159882 438.69312948 438.69312948 438.69312947a437.96818845 437.96818845 0 0 0 431.90974813-361.27974164 24.49266369 24.49266369 0 0 0-19.78054399-28.37627851"},null,-1)];function oe(t,o){return e.openBlock(),e.createElementBlock("svg",ee,te)}const le=h(Q,[["render",oe]]),Pe="",ne={},ae={viewBox:"0 0 1024 1024","aria-hidden":"true","aria-role":"button","aria-label":"\u653E\u5927",class:"svg"},se=[e.createElementVNode("path",{d:"M325.3196818 850.33221435c-9.66522217-9.66522217-10.23376465-24.62036133-1.58203125-33.81591797l290.82183838-290.84655761c12.48321533-11.84051513 12.43377685-14.93041992 1e-8-27.36419678L323.73765055 207.50842285C315.06119792 198.31286621 315.65445964 183.35772705 325.3196818 173.69250489c9.83825684-9.83825684 25.18890381-10.38208008 34.33502198-1.26068116l323.03100586 323.03100586c3.97979737 3.97979737 5.75958252 9.14611817 6.08093262 14.51019288l-1e-8 4.05395507c-0.34606934 5.36407471-2.1258545 10.53039551-6.08093261 14.51019287L359.65470378 851.59289551C350.50858561 860.6895752 335.1332194 860.14575195 325.3196818 850.33221435z"},null,-1)];function ie(t,o){return e.openBlock(),e.createElementBlock("svg",ae,se)}const re=h(ne,[["render",ie]]),We="",ce=e.defineComponent({name:"FoxPreviewImage",components:{ZoomOut:O,ZoomIn:Z,RotateLeft:J,RotateRight:le,Close:X,ArrowRight:re},props:{modelValue:{type:Boolean,default:!1},src:{type:[String,Array],required:!0},zIndex:{type:Number,default:9e3},initialIndex:{type:Number,default:0}},setup(t,{emit:o}){const p=e.ref(null);let f=e.ref(!1),w=e.ref(0),i=t.src&&t.src.length?e.ref(t.initialIndex):e.ref(0),r=e.ref(0),s=e.ref(1),c=e.ref(0),d=e.ref(0),u=e.ref(0),m=e.ref(0),n=e.ref([]),a=e.reactive({x:0,y:0});const y=()=>{f.value=t.modelValue},he=()=>{f.value=!1,o("update:modelValue",f.value)},we=l=>{if(w.value===1){const{x:$,y:B}=l,k=$-a.x,C=B-a.y;u.value=k+u.value-c.value,m.value=C+m.value-d.value,requestAnimationFrame(()=>{c.value=k,d.value=C})}},b=()=>{s.value>.5&&(s.value-=.1)},x=()=>{s.value<2&&(s.value+=.1)},ye=l=>{requestAnimationFrame(()=>{(l.wheelDelta||l.detail*-40)>0?x():b()})},ve=we,ge=ye,$e=()=>{w.value=0,c.value=0,d.value=0},ke=l=>{w.value=1,a={x:l.x,y:l.y}},Ce=()=>{r.value+=90},Ee=()=>{r.value-=90},Be=()=>{const l=document.createElement("div"),$=document.createElement("div");l.appendChild($),l.style.width="100px",l.style.height="50px",l.style.overflow="scroll",l.style.marginLeft="-100000px",document.body.appendChild(l);const B=$.offsetWidth,k=l.offsetWidth,C=setTimeout(()=>{document.body.removeChild(l),clearTimeout(C)},10);return k-B},be=()=>{const l=n.value.length||0;i.value>0?i.value--:i.value=l-1,r.value=0,s.value=1,u.value=0,m.value=0,a.x=0,a.y=0,c.value=0,d.value=0},xe=()=>{const l=n.value.length||0;i.valueparseFloat(s.value.toFixed(1))),Me=e.computed(()=>`${i.value+1}/${n.value.length}`);e.onMounted(()=>{y()});const Ne=l=>l.scrollHeight>window.innerHeight;return e.watchEffect(()=>{f.value=t.modelValue,t.modelValue?(p.value!==null&&p.value.focus(),Ne(document.body)&&(document.body.style.paddingRight=Be()+"px",document.body.classList.add("fox-lock-window"))):(document.body.classList.remove("fox-lock-window"),document.body.style.paddingRight="0px")}),e.watchEffect(()=>{const l=v(t.src);l==="string"?(i.value=0,r.value=0,s.value=1,u.value=0,m.value=0,a.x=0,a.y=0,c.value=0,d.value=0,n.value=[t.src]):l==="array"&&(t.initialIndex>=0&&t.initialIndex[t.flag?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"refEl",class:"owl-preview",style:e.normalizeStyle({"z-index":t.zIndex}),tabindex:"1",onKeyup:o[8]||(o[8]=e.withKeys(e.withModifiers((...n)=>t.close&&t.close(...n),["exact"]),["esc"]))},[e.createElementVNode("div",{class:"owl-preview-canvas",onMousewheel:o[3]||(o[3]=(...n)=>t.handleMousewheel&&t.handleMousewheel(...n)),onDOMMouseScroll:o[4]||(o[4]=(...n)=>t.handleMousewheel&&t.handleMousewheel(...n))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.uri,(n,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:a},[t.active===a?(e.openBlock(),e.createElementBlock("div",{key:0,onMousemove:o[0]||(o[0]=(...y)=>t.handleMouseMove&&t.handleMouseMove(...y)),onMouseup:o[1]||(o[1]=(...y)=>t.mouseup&&t.mouseup(...y)),onMousedown:o[2]||(o[2]=(...y)=>t.mousedown&&t.mousedown(...y)),style:e.normalizeStyle([{transform:`rotate(${t.angle}deg) scale(${t.scale}) translate(${t.x}px,${t.y}px)`},{display:"inline-block"}])},[e.createElementVNode("img",{class:"owl-preview-image",src:n,alt:"\u88AB\u62D6\u62FD\u7684\u56FE\u7247",draggable:"false"},null,8,de)],36)):e.createCommentVNode("",!0)],64))),128))],32),e.createElementVNode("div",{class:"owl-preview-close",style:e.normalizeStyle({"z-index":t.zIndex+1}),onClick:o[5]||(o[5]=(...n)=>t.close&&t.close(...n))},[e.createVNode(r)],4),t.uri&&t.uri.length>1?(e.openBlock(),e.createElementBlock("div",{key:0,class:"owl-preview-operate",style:e.normalizeStyle({"z-index":t.zIndex+1})},[e.createElementVNode("div",{class:"owl-preview-operate-item owl-preview-operate-item-left",onClick:o[6]||(o[6]=(...n)=>t.prev&&t.prev(...n))},[e.createVNode(s,{class:"owl-preview-operate-icon owl-preview-operate-icon-left"})]),e.createElementVNode("div",{class:"owl-preview-operate-item",onClick:o[7]||(o[7]=(...n)=>t.next&&t.next(...n))},[e.createVNode(s,{class:"owl-preview-operate-icon owl-preview-operate-icon"})])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"owl-preview-utils",style:e.normalizeStyle({"z-index":t.zIndex+1})},[e.createVNode(c,{title:"\u7F29\u5C0F",class:"owl-preview-utils-item",onClick:t.zoomOut},null,8,["onClick"]),e.createVNode(d,{title:"\u653E\u5927",class:"owl-preview-utils-item",onClick:t.enlarge},null,8,["onClick"]),e.createElementVNode("div",{title:"\u7F29\u653E\u500D\u6570",tabindex:"-1",class:"owl-preview-utils-item owl-preview-utils-scale",textContent:e.toDisplayString(t.getCurrScale)},null,8,ue),t.uri&&t.uri.length>1?(e.openBlock(),e.createElementBlock("div",{key:0,title:"\u56FE\u7247\u4F4D\u7F6E",class:"owl-preview-utils-item owl-preview-utils-position",textContent:e.toDisplayString(t.getCurrIndex)},null,8,me)):e.createCommentVNode("",!0),e.createVNode(u,{title:"\u5DE6\u65CB\u8F6C",class:"owl-preview-utils-item",onClick:t.clockwiseRotation},null,8,["onClick"]),e.createVNode(m,{title:"\u53F3\u65CB\u8F6C",class:"owl-preview-utils-item",onClick:t.anticlockwiseRotation},null,8,["onClick"])],4)],36)):e.createCommentVNode("",!0)]),_:1})])}const E=h(ce,[["render",_e]]),pe=t=>{t.component(E.name,E)},fe=E;_.FoxPreviewImage=fe,_.default=pe,Object.defineProperties(_,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); diff --git a/lib/style.css b/lib/style.css index 75fe6c1..a42a8c4 100644 --- a/lib/style.css +++ b/lib/style.css @@ -1 +1 @@ -.svg{user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden}.owl-preview{width:100vw;height:100vh;position:absolute;top:50%;left:50%;margin-left:-50vw;margin-top:-50vh;background-color:#0006;overflow:hidden;border-radius:4px}.owl-preview-canvas{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;font-size:0}.owl-preview-image{user-select:none;display:block;pointer-events:none}.owl-preview-image:active{cursor:pointer}.owl-preview-close{position:absolute;top:20px;right:20px;user-select:none;cursor:pointer;background-color:#606266;border-radius:50%;font-size:26px;display:flex;height:30px;width:30px;align-content:center;align-items:center;justify-content:center;color:#fff}.owl-preview-operate-item{background-color:#606266;width:40px;height:40px;border-radius:20px;display:flex;justify-content:center;align-content:center;align-items:center;cursor:pointer;position:absolute;top:50%;margin-top:-20px;right:5vw}.owl-preview-operate-item-left{left:5vw}.owl-preview-operate .owl-preview-operate-icon{font-size:24px;color:#fff}.owl-preview-operate .owl-preview-operate-icon-left{transform:rotate(180deg)}.owl-preview .owl-preview-utils{position:absolute;bottom:5%;left:50%;transform:translate(-98px);border-radius:30px;z-index:20;background-color:#606266;display:flex;padding:8px 10px}.owl-preview .owl-preview-utils-item{cursor:pointer;margin:0 10px;color:#fff;font-size:24px}.owl-preview .owl-preview-utils-scale{font-size:14px;position:relative;background-color:#606266;border:1px solid #ffffff;box-sizing:border-box;width:34px;border-radius:1px;line-height:22px;text-align:center;cursor:unset}.owl-preview .owl-preview-utils-scale:before,.owl-preview .owl-preview-utils-scale:after{position:absolute;width:100%;height:100%;content:"";z-index:1;border:1px solid #606266;box-sizing:border-box}.owl-preview .owl-preview-utils-scale:before{height:12px;top:50%;margin-top:-6px;width:34px;left:-1px;border-width:0 1px}.owl-preview .owl-preview-utils-scale:after{height:24px;width:20px;top:-1px;left:50%;margin-left:-10px;border-width:1px 0}.owl-preview .owl-preview-utils-position{font-size:14px;box-sizing:border-box;width:24px;line-height:24px;text-align:center;cursor:default}.font-svg{user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden} +.svg{user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden}.owl-preview{width:100vw;height:100vh;position:absolute;top:50%;left:50%;margin-left:-50vw;margin-top:-50vh;background-color:#0006;overflow:hidden;border-radius:4px;backdrop-filter:saturate(50%) blur(4px)}.owl-preview-canvas{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;font-size:0}.owl-preview-image{user-select:none;display:block;pointer-events:none}.owl-preview-image:active{cursor:pointer}.owl-preview-close{position:absolute;top:-40px;right:-40px;user-select:none;cursor:pointer;background-color:#0000004d;border-radius:50%;font-size:26px;height:80px;width:80px;color:#fff;overflow:hidden;transition:background-color .15s}.owl-preview-close>svg{position:absolute;left:15px;bottom:15px}.owl-preview-close:hover{background-color:#00000080}.owl-preview-operate-item{background-color:#606266;width:40px;height:40px;border-radius:20px;display:flex;justify-content:center;align-content:center;align-items:center;cursor:pointer;position:absolute;top:50%;margin-top:-20px;right:5vw}.owl-preview-operate-item-left{left:5vw}.owl-preview-operate .owl-preview-operate-icon{font-size:24px;color:#fff}.owl-preview-operate .owl-preview-operate-icon-left{transform:rotate(180deg)}.owl-preview .owl-preview-utils{position:absolute;bottom:5%;left:50%;transform:translate(-98px);border-radius:30px;z-index:20;background-color:#606266;display:flex;padding:8px 10px}.owl-preview .owl-preview-utils-item{cursor:pointer;margin:0 10px;color:#fff;font-size:24px}.owl-preview .owl-preview-utils-scale{font-size:14px;position:relative;background-color:#606266;border:1px solid #ffffff;box-sizing:border-box;width:34px;border-radius:1px;line-height:22px;text-align:center;cursor:unset}.owl-preview .owl-preview-utils-scale:before,.owl-preview .owl-preview-utils-scale:after{position:absolute;width:100%;height:100%;content:"";z-index:1;border:1px solid #606266;box-sizing:border-box}.owl-preview .owl-preview-utils-scale:before{height:12px;top:50%;margin-top:-6px;width:34px;left:-1px;border-width:0 1px}.owl-preview .owl-preview-utils-scale:after{height:24px;width:20px;top:-1px;left:50%;margin-left:-10px;border-width:1px 0}.owl-preview .owl-preview-utils-position{font-size:14px;box-sizing:border-box;width:24px;line-height:24px;text-align:center;cursor:default}.font-svg{user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden}.fox-lock-window{overflow:hidden} diff --git a/package.json b/package.json index 97c49c4..0164dea 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "fox-preview-image", "description": "一个支持vue2和vue3的预览图片组件", - "version": "2.5.0", + "version": "2.5.1", "main": "lib/preview-image.umd.js", "module": "lib/preview-image.mjs", "browser": "lib/preview-image.umd.js", diff --git a/src/components/preview-image/src/index.vue b/src/components/preview-image/src/index.vue index 9d04731..8dd2ef9 100644 --- a/src/components/preview-image/src/index.vue +++ b/src/components/preview-image/src/index.vue @@ -146,7 +146,7 @@ export default defineComponent({ }, }, setup(props, { emit }) { - const bodyStyleCache = ref(null); + let bodyStyleCache = ""; const refEl = ref(null); let flag = ref(false); let status = ref(0); @@ -312,7 +312,7 @@ export default defineComponent({ }); const hasScrollbar = (el: HTMLElement) => { - if (el.scrollHeight > el.clientHeight) { + if (el.scrollHeight > window.innerHeight) { return true; } return false; @@ -327,16 +327,11 @@ export default defineComponent({ const isScrollBar = hasScrollbar(document.body); if (isScrollBar) { document.body.style.paddingRight = getScrollWidth() + "px"; - bodyStyleCache.value = document.body.getAttribute("style"); + document.body.classList.add("fox-lock-window"); } - - document.body.style.overflow = "hidden"; } else { - if (bodyStyleCache.value) { - document.body.setAttribute("style", bodyStyleCache.value as string); - } else { - document.body.removeAttribute("style"); - } + document.body.classList.remove("fox-lock-window"); + document.body.style.paddingRight = "0px"; } }); @@ -415,6 +410,7 @@ export default defineComponent({ background-color: rgba($color: #000000, $alpha: 0.4); overflow: hidden; border-radius: 4px; + backdrop-filter: saturate(50%) blur(4px); &-canvas { width: 100vw; height: 100vh; @@ -433,20 +429,26 @@ export default defineComponent({ } &-close { position: absolute; - top: 20px; - right: 20px; + top: -40px; + right: -40px; user-select: none; cursor: pointer; - background-color: #606266; + background-color: rgba($color: #000000, $alpha: 0.3); border-radius: 50%; font-size: 26px; - display: flex; - height: 30px; - width: 30px; - align-content: center; - align-items: center; - justify-content: center; + height: 80px; + width: 80px; color: white; + overflow: hidden; + transition: background-color 0.15s; + & > svg { + position: absolute; + left: 15px; + bottom: 15px; + } + &:hover { + background-color: rgba($color: #000000, $alpha: 0.5); + } } &-operate { &-item { @@ -548,4 +550,7 @@ export default defineComponent({ fill: currentColor; overflow: hidden; } +.fox-lock-window { + overflow: hidden; +} diff --git a/types/components/preview-image/index.d.ts b/types/components/preview-image/index.d.ts index c061db2..9e012c9 100644 --- a/types/components/preview-image/index.d.ts +++ b/types/components/preview-image/index.d.ts @@ -19,6 +19,7 @@ export declare const FoxPreviewImage: import("vue").DefineComponent<{ default: number; }; }, { + refEl: import("vue").Ref; flag: import("vue").Ref; status: import("vue").Ref; active: import("vue").Ref; diff --git a/types/components/preview-image/src/index.vue.d.ts b/types/components/preview-image/src/index.vue.d.ts index ef166aa..a614769 100644 --- a/types/components/preview-image/src/index.vue.d.ts +++ b/types/components/preview-image/src/index.vue.d.ts @@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{ default: number; }; }, { + refEl: import("vue").Ref; flag: import("vue").Ref; status: import("vue").Ref; active: import("vue").Ref;