@vuux/editor
Version:
Vue Nuxt 富文本编辑器
87 lines (86 loc) • 3.34 kB
JavaScript
import { Utils as c } from "@vuux/utils";
class l {
static list = [];
static install;
/**
* 创建消息
*
* @param options 配置
*/
static createMessage(t) {
const { type: s, content: i, duration: e = 2e3 } = t, a = document.createElement("div");
return a.classList.add("editor-message"), a.style.top = `${l.list.length * 50 + 20}px`, s === "success" ? a.innerHTML = `
<div class="message-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="#20c997" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m3.535 6.381l-4.95 4.95l-2.12-2.121a1 1 0 0 0-1.415 1.414l2.758 2.758a1.1 1.1 0 0 0 1.556 0l5.586-5.586a1 1 0 0 0-1.415-1.415"/></g></svg>
</div>
<div class="message-content">${i}</div>
` : a.innerHTML = `
<div class="message-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#f65d68" d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7t.7.275t.7-.275zm0 8.6q-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 22"/></svg>
</div>
<div class="message-content">${i}</div>
`, { message: a, duration: e };
}
/**
* 移除消息
*
* @param message 消息Dom
*/
static remove(t) {
const s = l.list.indexOf(t);
if (s >= 0) {
l.list.splice(s, 1), document.body.removeChild(t);
for (let i = 0; i < l.list.length; i++)
l.list[i].style.top = `${i * 50 + 20}px`;
}
}
/**
* 自动关闭
*
* @param message 消息Dom
* @param duration 延迟ms
*/
static async autoClose(t, s) {
await c.wait(s), t.classList.add("is-hide"), await c.wait(300), l.remove(t);
}
/**
* 创建消息
*
* @param message 消息Dom
* @param duration 延迟ms
*/
static add(t, s) {
l.list.push(t), document.body.appendChild(t), l.autoClose(t, s);
}
/**
* @description 显示成功消息
*
* @param content 内容
* @param duration 延迟ms
*/
static success(t, s = 2e3) {
const { message: i, duration: e } = l.createMessage({
type: "success",
content: t,
duration: s
});
l.add(i, e);
}
/**
* @description 显示失败消息
*
* @param content 内容
* @param duration 延迟ms
*/
static error(t, s = 2e3) {
const { message: i, duration: e } = l.createMessage({
type: "error",
content: t,
duration: s
});
l.add(i, e);
}
}
export {
l as default
};