images-viewer-vue3
Version:
A lightweight image viewer for Vue3
56 lines (55 loc) • 2.1 kB
JavaScript
const f = {
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 }
}, w = () => {
(() => {
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: v = "info", duration: o = 3e3 }) {
const i = Object.assign(f, { title: e, message: l, type: v, duration: o }), n = document.getElementById("ivv-message-wrapper");
if (n) {
const s = document.createElement("div"), g = setTimeout(() => {
n.removeChild(s);
}, o + 1e3);
s.onclick = (p) => {
p.target.closest(".ivv-message-item__close") && (n.removeChild(s), clearInterval(g));
};
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
};
};
export {
w as useMessage
};