@dfeidao/atom-web
Version:
原子操作
66 lines (65 loc) • 6 kB
JavaScript
;
/**
* @module msgbox弹窗
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const animation_1 = require("@dfeidao/animation");
const on_1 = __importDefault(require("@dfeidao/core/on"));
const _z_index_1 = __importDefault(require("./_z-index"));
/**
* 成功提示
* @param content 提示内容
* @see [api](https://dfeidao.gitee.io/feidao-web/browser/msgbox)
* @requires 使用本原子操作需要在package.json中devDependencies下加入`"@dfeidao/animation":"@version";"@dfeidao/core":"@version";` @version 为该模块的版本号,可以在[这里](https://feidao-edu.gitee.io/changelogs/)查询
* @example
* ```ts
* import success from '@dfeidao/atom-web/msgbox/success';
* success('删除成功！');
* ```
*/
function success(content) {
const icon = '<img style="width:20px;height:20px" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTM0MzMwNTk5NzE2IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0NzYiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyLjA0MiA5NTguNzA4aC0xLjE3QzI2NC42IDk1OC4wOCA2NC43MDYgNzU3LjE4MyA2NS4yOTEgNTEwLjg3YzAuMjkzLTExOS4zMDkgNDcuMDQ3LTIzMS4zODMgMTMxLjY0NS0zMTUuNTY0IDg0LjMwNi04My44NDYgMTk2LjEzLTEzMC4wMTQgMzE1LjAyMS0xMzAuMDE0aDEuMTdjMTE5LjMxIDAuMjkzIDIzMS4zODQgNDcuMDA1IDMxNS41NjUgMTMxLjYwMyA4NC4xNCA4NC42IDEzMC4zMDcgMTk2Ljg4MyAxMzAuMDE0IDMxNi4yMzQtMC4yOTMgMTE5LjMwOS00Ny4wMDUgMjMxLjM4My0xMzEuNjAzIDMxNS41MjItODQuMzA2IDgzLjg5LTE5Ni4xNzEgMTMwLjA1Ny0zMTUuMDYyIDEzMC4wNTd6IG0tMC4wODQtODI5LjE4M2MtMTAxLjc4NyAwLTE5Ny41NTIgMzkuNTE5LTI2OS43MzEgMTExLjMyMS03Mi40MyA3Mi4wNTQtMTEyLjQ1MSAxNjguMDI4LTExMi43MDIgMjcwLjE5MS0wLjUwMSAyMTAuODkyIDE3MC42NjIgMzgyLjg5MyAzODEuNTEzIDM4My40MzZoMS4wMDRjMTAxLjc4NyAwIDE5Ny41NTItMzkuNTIgMjY5LjczMS0xMTEuMzYzIDcyLjQzLTcyLjA1NCAxMTIuNDUxLTE2Ny45ODYgMTEyLjcwMi0yNzAuMTUgMC4yNS0xMDIuMTYyLTM5LjI2Ny0xOTguMzQ2LTExMS4zMjEtMjcwLjczNC03Mi4wNTQtNzIuNDMtMTY4LjAyOC0xMTIuNDUxLTI3MC4xOTEtMTEyLjcwMmwtMS4wMDUgMC4wMDF6IiBwLWlkPSIxNDc3IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PHBhdGggZD0iTTQ1OS4yMjQgNjkwLjMxNWEzMi4wNzcgMzIuMDc3IDAgMCAxLTIxLjQ5NS04LjIzOGMtMTMuMTczLTExLjg3Ny0xNC4yNi0zMi4xNTktMi4zODMtNDUuMzc0TDY5OC42OCAzNDMuOTNjMTEuOTE4LTEzLjEzIDMyLjItMTQuMjE5IDQ1LjM3My0yLjM4MyAxMy4xNzMgMTEuODc2IDE0LjI2IDMyLjE1OCAyLjM4MyA0NS4zNzNMNDgzLjEwMyA2NzkuNjkzYTMyLjEyOCAzMi4xMjggMCAwIDEtMjMuODc5IDEwLjYyMnoiIHAtaWQ9IjE0NzgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48cGF0aCBkPSJNNDU2LjYzMiA2OTAuNjkyYy04LjUzMSAwLTE3LjA2Mi0zLjM4Ny0yMy4zNzYtMTAuMDc5bC0xNTUuMTktMTY0Ljc2NWMtMTIuMTctMTIuOTIzLTExLjU0Mi0zMy4yNDcgMS4zMzktNDUuNDE2IDEyLjk2NC0xMi4xNjkgMzMuMjg4LTExLjU0MiA0NS40MTUgMS4zMzlsMTU1LjE5IDE2NC43NjVjMTIuMTY5IDEyLjkyMyAxMS41NDEgMzMuMjQ3LTEuMzQgNDUuNDE2YTMyLjA1NCAzMi4wNTQgMCAwIDEtMjIuMDM4IDguNzR6IiBwLWlkPSIxNDc5IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+" />';
const icon_close = '<img style="width:18px;height:18px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTM0MzMzMjc0ODg0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxMzgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA0NTYuMzFMOTQuMjQ3IDM4LjU1OGEzOS41NDIgMzkuNTQyIDAgMCAwLTU1LjY5IDAgMzkuMjY2IDM5LjI2NiAwIDAgMCAwIDU1LjY5TDQ1Ni4zMSA1MTIgMzguNTU4IDkyOS43NTNhMzkuNTQyIDM5LjU0MiAwIDAgMCAwIDU1LjY5IDM5LjI2NiAzOS4yNjYgMCAwIDAgNTUuNjkgMEw1MTIgNTY3LjY5bDQxNy43NTMgNDE3Ljc1MmMxNS4xNjMgMTUuMTY0IDQwLjI5IDE1LjM2IDU1LjY5IDBhMzkuMjY2IDM5LjI2NiAwIDAgMCAwLTU1LjY5TDU2Ny42OSA1MTIgOTg1LjQ0MiA5NC4yNDdhMzkuNTQyIDM5LjU0MiAwIDAgMCAwLTU1LjY5IDM5LjI2NiAzOS4yNjYgMCAwIDAtNTUuNjkgMEw1MTIgNDU2LjMxeiIgcC1pZD0iMjEzOSIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==" />';
const html = `<div data-id='msg' style="position: fixed;width:100%;height:40px;top:0;left:0;text-align:center;"><div style="color:#fff;line-height: 40px;border-radius:4px;padding:0 15px;background:#79B23D;display:inline-block;" ><i style="">${icon}</i><span style="font-size:14px;margin:0 20px 0 15px;vertical-align:middle;">${content}</span><i style="cursor:pointer;" title="close">${icon_close}</i></div></div>`;
return new Promise((resolve) => {
const container = window.document.createElement('div');
container.style.position = 'fixed';
container.style.zIndex = _z_index_1.default();
window.document.body.appendChild(container);
container.insertAdjacentHTML('beforeend', html);
const div = container.querySelector('[data-id=msg]');
const h = div.getBoundingClientRect().height;
function end() {
h1.destroy();
h2.destroy();
window.document.body.removeChild(container);
resolve();
}
const a = animation_1.anim(div, {
delay: 1000,
duration: 1000
}, {
top: {
end: -h,
start: 0
}
}, {
end
});
animation_1.play(a);
const h1 = on_1.default(div, 'click', () => {
animation_1.stop(a, true);
end();
});
const h2 = on_1.default(window, 'keydown', (e) => {
if (e.keyCode === 27) {
animation_1.stop(a, true);
end();
}
});
});
}
exports.default = success;