2 lines
5.2 KiB
JavaScript
2 lines
5.2 KiB
JavaScript
import{Y as t,Z as i,o as e,j as o,w as a,a0 as s,m as n,y as r,z as l,B as d,b0 as h,b1 as m,e as c,F as u,k as f,I as y,l as p,A as g}from"./index-90c12cc1.js";import{c as v,p as w}from"./uv-loading-icon.vue_vue_type_style_index_0_scoped_bad0efbf_lang.de7e0d02.js";import{_}from"./_plugin-vue_export-helper.1b428a4d.js";const $=_({name:"uv-transition",mixins:[t,i],emits:["click","change"],props:{show:{type:Boolean,default:!1},mode:{type:[Array,String,null],default:()=>"fade"},duration:{type:[String,Number],default:300},timingFunction:{type:String,default:"ease-out"},customClass:{type:String,default:""},cellChild:{type:Boolean,default:!1}},data:()=>({isShow:!1,transform:"",opacity:1,animationData:{},durationTime:300,config:{}}),watch:{show:{handler(t){t?this.open():this.isShow&&this.close()},immediate:!0}},computed:{transformStyles(){const t={transform:this.transform,opacity:this.opacity,...this.$uv.addStyle(this.customStyle),"transition-duration":this.duration/1e3+"s"};return this.$uv.addStyle(t,"string")}},created(){this.config={duration:this.duration,timingFunction:this.timingFunction,transformOrigin:"50% 50%",delay:0},this.durationTime=this.duration},methods:{init(t={}){t.duration&&(this.durationTime=t.duration),this.animation=v(Object.assign(this.config,t),this)},onClick(){this.$emit("click",{detail:this.isShow})},step(t,i={}){if(this.animation){for(let i in t)try{"object"==typeof t[i]?this.animation[i](...t[i]):this.animation[i](t[i])}catch(e){console.error(`方法 ${i} 不存在`)}return this.animation.step(i),this}},run(t){this.animation&&this.animation.run(t)},open(){clearTimeout(this.timer),this.transform="",this.isShow=!0;let{opacity:t,transform:i}=this.styleInit(!1);void 0!==t&&(this.opacity=t),this.transform=i,this.$nextTick((()=>{this.timer=setTimeout((()=>{this.animation=v(this.config,this),this.tranfromInit(!1).step(),this.animation.run(),this.opacity=1,this.$emit("change",{detail:this.isShow})}),20)}))},close(t){this.animation&&this.tranfromInit(!0).step().run((()=>{this.isShow=!1,this.animationData=null,this.animation=null;let{opacity:t,transform:i}=this.styleInit(!1);this.opacity=t||1,this.transform=i,this.$emit("change",{detail:this.isShow})}))},styleInit(t){let i={transform:""},e=(t,e)=>{"fade"===e?i.opacity=this.animationType(t)[e]:i.transform+=this.animationType(t)[e]+" "};return"string"==typeof this.mode?e(t,this.mode):this.mode.forEach((i=>{e(t,i)})),i},tranfromInit(t){let i=(t,i)=>{let e=null;"fade"===i?e=t?0:1:(e=t?"-100%":"0","zoom-in"===i&&(e=t?.8:1),"zoom-out"===i&&(e=t?1.2:1),"slide-right"===i&&(e=t?"100%":"0"),"slide-bottom"===i&&(e=t?"100%":"0")),this.animation[this.animationMode()[i]](e)};return"string"==typeof this.mode?i(t,this.mode):this.mode.forEach((e=>{i(t,e)})),this.animation},animationType:t=>({fade:t?1:0,"slide-top":`translateY(${t?"0":"-100%"})`,"slide-right":`translateX(${t?"0":"100%"})`,"slide-bottom":`translateY(${t?"0":"100%"})`,"slide-left":`translateX(${t?"0":"-100%"})`,"zoom-in":`scaleX(${t?1:.8}) scaleY(${t?1:.8})`,"zoom-out":`scaleX(${t?1:1.2}) scaleY(${t?1:1.2})`}),animationMode:()=>({fade:"opacity","slide-top":"translateY","slide-right":"translateX","slide-bottom":"translateY","slide-left":"translateX","zoom-in":"scale","zoom-out":"scale"}),toLine:t=>t.replace(/([A-Z])/g,"-$1").toLowerCase()}},[["render",function(t,i,h,m,c,u){const f=d;return c.isShow?(e(),o(f,{key:0,ref:"ani",animation:c.animationData,class:n(h.customClass),style:r(u.transformStyles),onClick:u.onClick},{default:a((()=>[s(t.$slots,"default")])),_:3},8,["animation","class","style","onClick"])):l("",!0)}]]);const S=_({name:"uv-loading-icon",mixins:[t,i,w],data:()=>({array12:Array.from({length:12}),aniAngel:360,webviewHide:!1,loading:!1}),computed:{otherBorderColor(){const t=h(this.color,"#ffffff",100)[80];return"circle"===this.mode?this.inactiveColor?this.inactiveColor:t:"transparent"}},watch:{show(t){}},mounted(){this.init()},methods:{init(){setTimeout((()=>{}),20)},addEventListenerToWebview(){const t=m(),i=t[t.length-1].$getAppWebview();i.addEventListener("hide",(()=>{this.webviewHide=!0})),i.addEventListener("show",(()=>{this.webviewHide=!1}))}}},[["render",function(t,i,s,h,m,v){const w=d,_=g;return t.show?(e(),o(w,{key:0,class:n(["uv-loading-icon",[t.vertical&&"uv-loading-icon--vertical"]]),style:r([t.$uv.addStyle(t.customStyle)])},{default:a((()=>[m.webviewHide?l("",!0):(e(),o(w,{key:0,class:n(["uv-loading-icon__spinner",[`uv-loading-icon__spinner--${t.mode}`]]),ref:"ani",style:r({color:t.color,width:t.$uv.addUnit(t.size),height:t.$uv.addUnit(t.size),borderTopColor:t.color,borderBottomColor:v.otherBorderColor,borderLeftColor:v.otherBorderColor,borderRightColor:v.otherBorderColor,"animation-duration":`${t.duration}ms`,"animation-timing-function":"semicircle"===t.mode||"circle"===t.mode?t.timingFunction:""})},{default:a((()=>["spinner"===t.mode?(e(!0),c(u,{key:0},f(m.array12,((t,i)=>(e(),o(w,{key:i,class:"uv-loading-icon__dot"})))),128)):l("",!0)])),_:1},8,["class","style"])),t.text?(e(),o(_,{key:1,class:"uv-loading-icon__text",style:r([{fontSize:t.$uv.addUnit(t.textSize),color:t.textColor},t.$uv.addStyle(t.textStyle)])},{default:a((()=>[y(p(t.text),1)])),_:1},8,["style"])):l("",!0)])),_:1},8,["style","class"])):l("",!0)}],["__scopeId","data-v-bad0efbf"]]);export{$ as _,S as a};
|