@meleon/uni-ui/lib/ml-message/MlMessage.js

A uniapp components library written in vue3 and typescript

import{ref}from"vue";class MlMessage{constructor(t){this.messagesCount=0,t&&(this.instance=t,this.messages=ref([]),this.messagesId=new Set,this.messagesAnimation=ref({}))}add(t){this.messagesCount++;const e=`ml-message--${this.messagesCount}`;t=Object.assign({id:e},t),this.messagesId.add(e),this.messages.value.push(t),setTimeout((()=>{this.addAnimationData(t)}),200);const s=setTimeout((()=>{this.remove(t)}),t.duration||1200);return{close:()=>{s&&clearTimeout(s),this.remove(t)}}}createAnimationData(t,e="in"){const s=uni.createAnimation({transformOrigin:"0 50%",duration:500,timingFunction:"ease",delay:0});return{"top-in":()=>{s.translateY(10).opacity(1).step()},"top-out":()=>{s.translateY(-10).opacity(0).step()},"bottom-in":()=>{s.translateY(-10).opacity(1).step()},"bottom-out":()=>{s.translateY(-20).opacity(0).step()}}[`${t.position||"top"}-${e}`](),s.export()}addAnimationData(t){t.id&&(this.messagesAnimation.value[t.id]=this.createAnimationData(t))}getAnimationData(t){return t?this.messagesAnimation.value[t]:null}remove(t){const{id:e}=t;e&&(this.messagesAnimation.value[e]=this.createAnimationData(t,"out"),setTimeout((()=>{for(let t=0;t<this.messages.value.length;t++){if(this.messages.value[t].id===e){this.messages.value.splice(t,1),this.messagesId.delete(e);break}}}),500))}}export default MlMessage;