t-fighting-design/lib/image-preview/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),v=require("./index3.js"),c=require("../../button/index.js"),_=require("../../toolbar/index.js"),s=require("../../toolbar-item/index.js"),j=require("../../popup/index.js"),q=require("../../_components/svg/index2.js"),C=require("../../_components/svg/index3.js"),h=require("../../_components/svg/index5.js"),F=require("../../_components/svg/index6.js"),y=require("../../_components/svg/index9.js"),V=require("../../_components/svg/index10.js"),N=require("../../_components/svg/index15.js"),L=require("../../_components/svg/index16.js"),B=require("../../_hooks/use-operation-img/index.js");require("../../_hooks/use-message/index.js");require("../../loading-bar/src/index2.js");const $=["src"],T=e.defineComponent({name:"FImagePreview"}),E=e.defineComponent({...T,props:v.Props,emits:v.Emits,setup(p,{emit:g}){const t=p,{scale:b,rotate:u,smaller:x,bigger:k,onImgMousewheel:a,recovery:d}=B.useOperationImg(),l=e.ref(t.visible),i=e.ref(t.showIndex>t.imgList.length-1?0:t.showIndex),f=()=>{g("update:visible",!1),t.close&&t.close()};e.watch(()=>l.value,n=>{n||f()}),e.watch(()=>t.visible,n=>{l.value=n});const w=()=>{t.imgList.forEach(o=>{const r=new Image;r.src=o})},m=n=>{d();const o={next:()=>{if(i.value<t.imgList.length-1){i.value++;return}i.value=0},prev:()=>{if(i.value>0){i.value--;return}i.value=t.imgList.length-1}};o[n]&&o[n]()},I=n=>{const o={1:()=>x(),2:()=>k(),3:()=>d(),4:()=>{u.value+=90},5:()=>{u.value-=90}};o[n.key]&&o[n.key]()};return(n,o)=>(e.openBlock(),e.createElementBlock("div",{class:"f-image-preview",onMousewheel:o[3]||(o[3]=(...r)=>e.unref(a)&&e.unref(a)(...r))},[e.createVNode(e.unref(j.FPopup),{visible:l.value,"onUpdate:visible":o[2]||(o[2]=r=>l.value=r),open:w},{default:e.withCtx(()=>[e.createElementVNode("img",{class:"f-image-preview__exhibition",draggable:"false",src:n.imgList[i.value],style:e.normalizeStyle({transform:`scale(${e.unref(b)}) rotate(${e.unref(u)}deg)`,borderRadius:n.round})},null,12,$),n.imgList.length>1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(e.unref(c.FButton),{class:"f-image-preview__next",circle:"","before-icon":e.unref(C.default),onClick:o[0]||(o[0]=r=>m("next"))},null,8,["before-icon"]),e.createVNode(e.unref(c.FButton),{class:"f-image-preview__prev",circle:"","before-icon":e.unref(q.default),onClick:o[1]||(o[1]=r=>m("prev"))},null,8,["before-icon"])],64)):e.createCommentVNode("",!0),e.createVNode(e.unref(c.FButton),{class:"f-image-preview__close",circle:"","before-icon":e.unref(h.default),onClick:f},null,8,["before-icon"]),n.isOption?(e.openBlock(),e.createBlock(e.unref(_.FToolbar),{key:1,class:"f-image-preview__option",round:"",onClick:I},{default:e.withCtx(()=>[e.createVNode(e.unref(s.FToolbarItem),{icon:e.unref(L.default),"data-key":1},null,8,["icon"]),e.createVNode(e.unref(s.FToolbarItem),{icon:e.unref(N.default),"data-key":2},null,8,["icon"]),e.createVNode(e.unref(s.FToolbarItem),{icon:e.unref(F.default),"data-key":3},null,8,["icon"]),e.createVNode(e.unref(s.FToolbarItem),{icon:e.unref(V.default),"data-key":4},null,8,["icon"]),e.createVNode(e.unref(s.FToolbarItem),{icon:e.unref(y.default),"data-key":5},null,8,["icon"])]),_:1})):e.createCommentVNode("",!0)]),_:1},8,["visible"])],32))}});exports.default=E;