大家好!我叫戴向天
QQ群:602504799
如若有不理解的,可加QQ群进行咨询了解
具体CSS样式群里面有。
JS代码如下
// 保持DOM元素唯一
const baseDom = {
overlay: null,
dialog: null,
}
// 获取最大的z-index值
const getMaxZndex = () => {
let arr = [...document.all].map(e => +window.getComputedStyle(e).zIndex || 0);
return arr.length ? Math.max(...arr) + 1 : 0
}
// 显示
const fadeIn = (dom) => {
dom.style.display = '';
dom.classList.add('mobile-fade-enter-active');
setTimeout(() => {
dom.classList.remove('mobile-fade-enter-active')
}, 300)
}
// 隐藏
const fadeOut = (dom) => {
dom.classList.add('mobile-fade-leave-active');
setTimeout(() => {
dom.style.display = 'none';
dom.classList.remove('mobile-fade-leave-active');
}, 300)
}
// 背景
const Overlay = (callback) => {
if (!baseDom.overlay) {
baseDom.overlay = document.createElement('div');
document.body.appendChild(baseDom.overlay)
}
baseDom.overlay.style.zIndex = getMaxZndex() - 1;
baseDom.overlay.classList = 'mobile-overlay'
fadeIn(baseDom.overlay);
baseDom.overlay.onclick = () => {
fadeOut(baseDom.overlay)
callback && callback()
}
return baseDom.overlay;
}
// 创建dialog的内容
const generateDialog = async (option) => {
return await new Promise((r, j) => {
option = {
...option
}
let overlay = null;
if (option.overlay === undefined || option.overlay === true) {
overlay = Overlay(() => {
r(false)
})
}
if (!baseDom.dialog) {
baseDom.dialog = document.createElement('div');
baseDom.dialog.classList = 'mobile-dialog';
document.body.appendChild(baseDom.dialog)
}
baseDom.dialog.innerHTML = null;
baseDom.dialog.style.zIndex = getMaxZndex();
const header = document.createElement('div');
header.classList = 'mobile-dialog__header';
header.innerHTML = option.title || '';
const content = document.createElement('div');
content.classList = 'mobile-dialog__content';
const message = document.createElement('div');
message.classList = 'mobile-dialog__message mobile-dialog__message--has-title';
message.innerHTML = option.message || '';
content.appendChild(message)
header.appendChild(content)
const footer = document.createElement('div');
footer.classList = 'mobile-hairline--top mobile-dialog__footer';
let cancelButton = null;
if (option.showCancelButton) {
// 取消按钮
cancelButton = document.createElement('button');
cancelButton.classList = 'mobile-button mobile-button--default mobile-button--large mobile-dialog__cancel';
const cancelSpan = document.createElement('span');
cancelSpan.classList = 'mobile-button__text';
cancelButton.innerHTML = option.cancelButtonText || '取消'
cancelButton.appendChild(cancelSpan);
footer.appendChild(cancelButton)
cancelButton.onclick = () => {
overlay && fadeOut(overlay)
r(false)
}
}
let confirmButton = null;
if (option.showConfirmButton === undefined || option.showConfirmButton === true) {
// 确认按钮
confirmButton = document.createElement('button');
confirmButton.classList = 'mobile-button mobile-button--default mobile-button--large mobile-dialog__confirm';
if (cancelButton) {
confirmButton.classList.add('mobile-hairline--left')
}
const confirmSpan = document.createElement('span');
confirmSpan.classList = 'mobile-button__text';
confirmSpan.innerHTML = option.confirmButtonText || '确认'
confirmButton.appendChild(confirmSpan);
footer.appendChild(confirmButton)
confirmButton.onclick = () => {
overlay && fadeOut(overlay)
r(true)
}
}
if (confirmButton && cancelButton) {
footer.classList.add('mobile-dialog__footer--buttons')
}
baseDom.dialog.appendChild(header)
baseDom.dialog.appendChild(content)
baseDom.dialog.appendChild(footer)
fadeIn(baseDom.dialog);
})
}
const Dialog = async (option) => {
const bool = await generateDialog(option);
fadeOut(baseDom.dialog)
return bool
}
Dialog.alert = async (option) => {
const bool = await generateDialog({ ...option, showCancelButton: false });
fadeOut(baseDom.dialog)
return bool
}
Dialog.confirm = async (option) => {
const bool = await generateDialog({ ...option, showCancelButton: true });
fadeOut(baseDom.dialog)
return bool
}
export {
Dialog
};
使用如下
await Dialog({
title: 'Dialog',
message: '欢迎使用',
});
await Dialog.alert({
title: 'Alert',
message: '欢迎使用',
})
await Dialog.confirm({
title: 'Confirm',
message: '欢迎使用',
})