images-viewer-vue3
Version:
A lightweight image viewer for Vue3
10 lines (9 loc) • 1.8 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y={title:"提示",duration:2e3,type:"success",message:"提示内容"},a={success:{type:"success",title:"提示",message:"这是一条消息",duration:2e3},error:{type:"error",title:"提示",message:"这是一条消息",duration:2e3},warning:{type:"warning",title:"提示",message:"这是一条消息",duration:2e3},info:{type:"info",title:"提示",message:"这是一条消息",duration:2e3}},f=()=>{(()=>{const e=document.createElement("div");e.setAttribute("id","ivv-message-wrapper"),!document.querySelector("#ivv-message-wrapper")&&document.body.appendChild(e)})();const c=e=>{t({...a.success,...e})},r=e=>{t({...a.error,...e})},m=e=>{t({...a.warning,...e})},d=e=>{t({...a.info,...e})};function t({title:e="",message:l="",type:g="info",duration:o=3e3}){const i=Object.assign(y,{title:e,message:l,type:g,duration:o}),n=document.getElementById("ivv-message-wrapper");if(n){const s=document.createElement("div"),v=setTimeout(()=>{n.removeChild(s)},o+1e3);s.onclick=p=>{p.target.closest(".ivv-message-item__close")&&(n.removeChild(s),clearInterval(v))};const u=(i.duration/1e3).toFixed(2);s.classList.add("message-item",`ivv-message-item--${i.type}`),s.style.animation=`slideInLeft ease .3s, fadeOut linear 1s ${u}s forwards`,s.innerHTML=`
<div class="ivv-message-item__body">
<h3 class="ivv-message-item__title">${i.title}</h3>
<p class="ivv-message-item__msg">${i.message}</p>
</div>
<div class="ivv-message-item__close">
x
</div>
`,n.appendChild(s)}}return{success:c,error:r,warning:m,info:d}};exports.useMessage=f;