vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 1.83 kB
JavaScript
;const f=require("@vuux/utils");class i{static list=[];static create(e){const{title:s,text:t,color:o="var(--app-theme)",duration:d=3e3,position:l="top-right",type:w="info",showProgress:h=!0,showClose:y=!0}=e,n=document.createElement("div");n.classList.add("app-notification",l),n.style.background=o;const p=document.createElement("div");p.classList.add("notification-data");const m=document.createElement("div");if(m.classList.add("notification-info"),s){const a=document.createElement("div");a.classList.add("is-title"),a.textContent=s,m.appendChild(a)}if(t){const a=document.createElement("div");a.classList.add("is-text"),a.textContent=t,m.appendChild(a)}let c=null;y&&(c=document.createElement("div"),c.classList.add("notification-close"),c.textContent="✕",c.addEventListener("click",()=>i.remove(n)));let r=null;return h&&(r=document.createElement("div"),r.classList.add("notification-progress")),p.appendChild(m),c&&p.appendChild(c),n.appendChild(p),r&&n.appendChild(r),document.body.appendChild(n),i.list.push(n),i.reflow(l),i.autoClose(n,d,r),n}static async autoClose(e,s,t){t&&(t.style.width="100%",t.style.transition="none",requestAnimationFrame(()=>{t.style.transition=`width ${s}ms linear`,t.style.width="0%"})),await f.Utils.wait(s),e.classList.add("is-hide"),await f.Utils.wait(300),i.remove(e)}static remove(e){const s=i.list.indexOf(e);s>=0&&(i.list.splice(s,1),document.body.removeChild(e));const t=Array.from(e.classList).find(o=>["top-left","top-right","bottom-left","bottom-right"].includes(o));t&&i.reflow(t)}static reflow(e){const s=i.list.filter(d=>d.classList.contains(e)),t=e.startsWith("top");let o=10;for(let d=0;d<s.length;d++){const l=s[d];t?(l.style.top=`${o}px`,l.style.bottom=""):(l.style.bottom=`${o}px`,l.style.top=""),o+=l.offsetHeight+10}}}const v=u=>i.create(u);module.exports=v;