cione-comp-lib/lib/packages/co-carousel-basics/imagePreview.js

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("vue");require("./imagePreview.vue_vue_type_style_index_0_scoped_true_lang.js");var a=require("../../_virtual/plugin-vue_export-helper.js");const l=e.defineComponent({name:"ImagePreview",props:{modelValue:{type:Boolean},src:{type:String},preview:{type:Boolean},clockType:String},setup(a,{emit:l}){const t=e.ref(a.src),o=e.ref(!1),r=e.ref(),s=e.ref(),n=e.ref(1),u=e.ref(0),v=e.ref(!1),i=e.ref(0),c=e.ref(0),d=e.ref(),m=()=>{o.value&&e.nextTick((()=>{s.value.src=t.value;let e=s.value.offsetWidth/window.innerWidth,a=s.value.offsetHeight/window.innerHeight;s.value.offsetWidth>=s.value.offsetHeight?(s.value.style.width="100%",e<.1?r.value.style.width="24%":e>=.1&&e<=.2?r.value.style.width="44%":e>.2&&e<=.4?r.value.style.width="40%":e>.4&&e<=.625||(e>.625&&e<=1?r.value.style.width="60%":e>1&&e<=2?r.value.style.width="50%":e>2&&(r.value.style.width="60%"))):(s.value.style.height="100%",a>=1&&a<3?r.value.style.height="76%":a>=3&&(r.value.style.height="70%"))}))};return e.watch((()=>a.src),(()=>{t.value=a.src})),e.watch((()=>a.modelValue),(()=>{o.value=a.modelValue,m()})),e.onMounted((()=>{switch(a.clockType){case"max":d.value=128;break;case"middle":d.value=64;break;case"small":d.value=32}})),{imgSrc:t,refPreBox:r,refPreImg:s,isMask:o,isReset:v,closeSize:d,picturePreview:m,scaleFn:(e,a)=>{switch(e){case"add":n.value*=1.4;break;case"sub":n.value/=1.4;break;case"wheel":n.value+=a.wheelDelta/800}n.value>=7?n.value=7:n.value<=.2&&(n.value=.2),r.value.style.transform=`scale(${n.value.toFixed(3)}) \n      translate(${i.value}px, ${c.value}px)`,s.value.style.transform=`rotate(${u.value}deg)`,s.value.style.transition="transform 0.3s ease 0s"},rotateFn:e=>{"left"===e?u.value-=90:"right"===e&&(u.value+=90),s.value.style.transform=`rotate(${u.value}deg)`,s.value.style.transition="transform 0.3s ease 0s",s.value.addEventListener("transitionend",(()=>{0===Math.abs(u.value%360)&&(u.value=0,s.value.style.transform=`rotate(${u.value}deg)`,s.value.style.transition=null)}),!1)},resetFn:()=>{v.value=!v.value,n.value=1,u.value=0,i.value=0,c.value=0,r.value.style.transform=`scale(${n.value}) translate(${i.value}px, ${c.value}px)`,s.value.style.transform=`rotate(${u.value}deg)`,s.value.style.transition="transform 0.3s ease 0s"},cloxeFn:()=>{l("update:modelValue",!1)},mouseFn:e=>{let a=e.pageX-i.value*n.value,l=e.pageY-c.value*n.value;document.onmousemove=e=>{e.preventDefault(),i.value=(e.pageX-a)/n.value,c.value=(e.pageY-l)/n.value,r.value.style.transition=null,r.value.style.transform=`scale(${n.value}) translate(${i.value}px, ${c.value}px)`},document.onmouseup=e=>{e.preventDefault(),document.onmousemove=null,document.onmouseup=null}},...e.toRefs(a)}}}),t=a=>(e.pushScopeId("data-v-94c44a50"),a=a(),e.popScopeId(),a),o={key:0,class:"image-std__preview",style:{"z-index":"2022"}},r=[t((()=>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)))],s=[t((()=>e.createElementVNode("svg",{viewBox:"0 0 1024 1024"},[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"})],-1)))],n=[t((()=>e.createElementVNode("svg",{viewBox:"0 0 1024 1024"},[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"})],-1)))],u=[t((()=>e.createElementVNode("svg",{viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z"})],-1)))],v=[t((()=>e.createElementVNode("svg",{viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M813.176 180.706a60.235 60.235 0 0 1 60.236 60.235v481.883a60.235 60.235 0 0 1-60.236 60.235H210.824a60.235 60.235 0 0 1-60.236-60.235V240.94a60.235 60.235 0 0 1 60.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0 0 90.353 240.94v481.883a120.47 120.47 0 0 0 120.47 120.47h602.353a120.47 120.47 0 0 0 120.471-120.47V240.94a120.47 120.47 0 0 0-120.47-120.47zm-120.47 180.705a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 0 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zm-361.412 0a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 1 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zM512 361.412a30.118 30.118 0 0 0-30.118 30.117v30.118a30.118 30.118 0 0 0 60.236 0V391.53A30.118 30.118 0 0 0 512 361.412zM512 512a30.118 30.118 0 0 0-30.118 30.118v30.117a30.118 30.118 0 0 0 60.236 0v-30.117A30.118 30.118 0 0 0 512 512z"})],-1)))],i=[t((()=>e.createElementVNode("svg",{viewBox:"0 0 1024 1024"},[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"})],-1)))],c=[t((()=>e.createElementVNode("svg",{viewBox:"0 0 1024 1024"},[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"})],-1)))],d=["src"];var m=a.default(l,[["render",function(a,l,t,m,p,h){return e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[a.isMask?(e.openBlock(),e.createElementBlock("div",o,[e.createElementVNode("span",{class:"image-std__pre-cloxe",onClick:l[0]||(l[0]=(...e)=>a.cloxeFn&&a.cloxeFn(...e)),style:e.normalizeStyle({width:a.closeSize+"px",height:a.closeSize+"px"})},[(e.openBlock(),e.createElementBlock("svg",{viewBox:"0 0 1024 1024",style:e.normalizeStyle({width:a.closeSize-12+"px"})},r,4))],4),e.createElementVNode("div",{class:"image-std__pre-bottom",onDblclick:l[7]||(l[7]=e.withModifiers((()=>{}),["stop"]))},[e.createElementVNode("i",{onClick:l[1]||(l[1]=e=>a.scaleFn("sub",e))},s),e.createElementVNode("i",{onClick:l[2]||(l[2]=e=>a.scaleFn("add",e))},n),a.isReset?(e.openBlock(),e.createElementBlock("i",{key:0,onClick:l[3]||(l[3]=(...e)=>a.resetFn&&a.resetFn(...e))},u)):e.createCommentVNode("",!0),!1===a.isReset?(e.openBlock(),e.createElementBlock("i",{key:1,onClick:l[4]||(l[4]=(...e)=>a.resetFn&&a.resetFn(...e))},v)):e.createCommentVNode("",!0),e.createElementVNode("i",{onClick:l[5]||(l[5]=e=>a.rotateFn("left"))},i),e.createElementVNode("i",{onClick:l[6]||(l[6]=e=>a.rotateFn("right"))},c)],32),e.createElementVNode("div",{class:"image-std__pre-img",onDblclick:l[10]||(l[10]=e.withModifiers(((...e)=>a.cloxeFn&&a.cloxeFn(...e)),["stop"])),onMousewheel:l[11]||(l[11]=e=>a.scaleFn("wheel",e))},[e.createElementVNode("div",{ref:"refPreBox",onMousedown:l[8]||(l[8]=(...e)=>a.mouseFn&&a.mouseFn(...e)),onDblclick:l[9]||(l[9]=e.withModifiers((()=>{}),["stop"]))},[e.createElementVNode("img",{ref:"refPreImg",src:a.imgSrc,alt:"#"},null,8,d)],544)],32)])):e.createCommentVNode("",!0)])}],["__scopeId","data-v-94c44a50"]]);exports.default=m;