vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
98 lines (97 loc) • 3.52 kB
JavaScript
import { Utils as f } from "@vuux/utils";
class e {
/**
* 标记是否已有对话框存在
*/
static isOpen = !1;
/**
* 创建对话框元素
*
* @param options 配置项
*/
static createDialog(t) {
const { title: n = "提示信息", content: c, confirmText: s = "确认", cancelText: a, type: o = "info", onConfirm: l, onCancel: d } = t, i = document.createElement("div");
return i.classList.add("app-dialog"), i.classList.add(`is-${o}`), i.innerHTML = `
<div class="dialog-data">
<div class="dialog-header">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="var(--app-text-color)" opacity="0.62" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17q.425 0 .713-.288T13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17m0-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>
<p class="dialog-title">${n}</p>
</div>
<div class="dialog-content">${c}</div>
<div class="dialog-footer">
${a ? `<div class="is-cancel">${a}</div>` : ""}
<div class="is-confirm">${s}</div>
</div>
</div>
`, i.addEventListener("keydown", (r) => {
(r.key === " " || r.key === "Enter") && r.preventDefault();
}), a && i.querySelector(".is-cancel")?.addEventListener("click", () => {
d?.(), e.remove(i), e.isOpen = !1;
}), i.querySelector(".is-confirm")?.addEventListener("click", () => {
l(), e.remove(i), e.isOpen = !1;
}), i;
}
/**
* 添加对话框到页面
*/
static add(t) {
document.body.appendChild(t), t.focus();
}
/**
* 从页面移除对话框
*/
static async remove(t) {
document.body.contains(t) && (t.classList.add("is-leave"), await f.wait(200), document.body.contains(t) && document.body.removeChild(t));
}
/**
* @description 确认对话框
*
* @param options 字符串或对象
*/
static confirm(t = {}) {
if (e.isOpen)
return Promise.resolve(!1);
e.isOpen = !0;
let n;
return typeof t == "string" ? n = { title: "提示信息", content: t, confirmText: "确认", cancelText: "取消", type: "info" } : n = {
title: t.title ?? "提示信息",
content: t.content ?? "提示信息",
confirmText: t.confirmText ?? "确认",
cancelText: t.cancelText ?? "取消",
type: t.type ?? "info"
}, new Promise((c) => {
const s = e.createDialog({
...n,
onConfirm: () => c(!0),
onCancel: () => c(!1)
});
e.add(s);
});
}
/**
* @description 提示对话框
*
* @param options 字符串或对象
*/
static alert(t) {
if (e.isOpen)
return Promise.resolve();
e.isOpen = !0;
let n;
return typeof t == "string" ? n = { title: "提示信息", content: t, confirmText: "确认", type: "info" } : n = {
title: t.title ?? "提示信息",
content: t.content ?? "提示信息",
confirmText: t.confirmText ?? "确认",
type: t.type ?? "info"
}, new Promise((c) => {
const s = e.createDialog({
...n,
onConfirm: () => c()
});
e.add(s);
});
}
}
export {
e as default
};