160 lines
5.8 KiB
JavaScript
160 lines
5.8 KiB
JavaScript
|
||
// 语法糖
|
||
class Dialog {
|
||
|
||
// 默认参数
|
||
defaultOption = {
|
||
title: '标题1',
|
||
message: '内容1',
|
||
showConfirmButton: false,
|
||
confirmButtonText: '确认',
|
||
confirmButtonColor: '#ee0a24',
|
||
|
||
showCancelButton: true,
|
||
cancelButtonText: '取消',
|
||
cancelButtonColor: 'black',
|
||
|
||
className: '',
|
||
width: 320,
|
||
|
||
overlay: true,
|
||
closeOnPopstate: true, // 是否在页面回退时自动关闭
|
||
closeOnClickOverlay: true, // 是否在点击遮罩层后关闭弹窗
|
||
lockScroll: false,
|
||
allowHtml: true,
|
||
confirm: () => { }, // 确认按钮的回调
|
||
cancel: () => { }, // 点击取消按钮时触发
|
||
oncancel: () => { }, // 打开弹出
|
||
onconfirm: () => { } // 关闭弹窗
|
||
}
|
||
|
||
// 构造函数
|
||
constructor(option) {
|
||
|
||
if (option.hasOwnProperty("title") && option.hasOwnProperty("message")) {
|
||
this.defaultOption.title = option.title || this.defaultOption.title
|
||
this.defaultOption.message = option.message || this.defaultOption.message
|
||
|
||
option.hasOwnProperty("showConfirmButton") ? this.defaultOption.showConfirmButton = option.showConfirmButton : ''
|
||
option.hasOwnProperty("showCancelButton") ? this.defaultOption.showCancelButton = option.showCancelButton : ''
|
||
option.hasOwnProperty("overlay") ? this.defaultOption.overlay = option.overlay : ''
|
||
option.hasOwnProperty("closeOnPopstate") ? this.defaultOption.closeOnPopstate = option.closeOnPopstate : ''
|
||
option.hasOwnProperty("closeOnClickOverlay") ? this.defaultOption.closeOnClickOverlay = option.closeOnClickOverlay : ''
|
||
option.hasOwnProperty("lockScroll") ? this.defaultOption.lockScroll = option.lockScroll : ''
|
||
option.hasOwnProperty("allowHtml") ? this.defaultOption.allowHtml = option.allowHtml : ''
|
||
|
||
|
||
this.defaultOption.confirmButtonText = option.confirmButtonText || this.defaultOption.confirmButtonText
|
||
this.defaultOption.cancelButtonText = option.cancelButtonText || this.defaultOption.cancelButtonText
|
||
|
||
|
||
this.defaultOption.className = option.className || this.defaultOption.className
|
||
this.defaultOption.width = option.width || this.defaultOption.width
|
||
this.defaultOption.confirmButtonColor = option.confirmButtonColor || this.defaultOption.confirmButtonColor
|
||
this.defaultOption.cancelButtonColor = option.cancelButtonColor || this.defaultOption.cancelButtonColor
|
||
|
||
this.defaultOption.confirm = option.confirm || this.defaultOption.confirm
|
||
this.defaultOption.cancel = option.cancel || this.defaultOption.cancel
|
||
this.defaultOption.open = option.open || this.defaultOption.open
|
||
this.defaultOption.close = option.close || this.defaultOption.close
|
||
|
||
} else {
|
||
throw new Error("抱歉，缺少必填的title，message参数，请传入！")
|
||
}
|
||
}
|
||
|
||
initHTML() {
|
||
$("body").insertAdjacentHTML("beforeend", `
|
||
<div class="bmy_dialog ${this.defaultOption.className}">
|
||
<div class="bmy_dialog_content" style="width:${this.defaultOption.width}px">
|
||
<div class="bmy_dialog_title">${this.defaultOption.title}</div>
|
||
<div class="bmy_dialog_message"></div>
|
||
<div class="bmy_dialog_button">
|
||
${this.defaultOption.showCancelButton
|
||
? `<div style="color:${this.defaultOption.cancelButtonColor}" class="button bmy_dialog_cancel">${this.defaultOption.cancelButtonText}</div>`
|
||
: ''
|
||
}
|
||
${this.defaultOption.showConfirmButton
|
||
? `<div style="color:${this.defaultOption.confirmButtonColor}" class="button bmy_dialog_confirm">${this.defaultOption.confirmButtonText}</div>`
|
||
: ''
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>`);
|
||
|
||
this.initConfig();
|
||
}
|
||
|
||
initConfig() {
|
||
// 是否监听页面返回
|
||
if (this.defaultOption.closeOnPopstate) {
|
||
window.addEventListener("popstate", (e) => {
|
||
this.close();
|
||
}, false);
|
||
}
|
||
|
||
// 是否显示背景层
|
||
this.defaultOption.overlay
|
||
? ''
|
||
: $(".bmy_dialog ").style.backgroundColor = "rgba(0, 0, 0, 0)"
|
||
|
||
// message 是否支持渲染html
|
||
this.defaultOption.allowHtml
|
||
? $(".bmy_dialog_message").innerHTML = this.defaultOption.message
|
||
: $(".bmy_dialog_message").innerText = this.defaultOption.message
|
||
|
||
|
||
// 是否锁住背景层
|
||
this.defaultOption.lockScroll
|
||
? $("body").style.overflow = "hidden"
|
||
: $("body").style.overflow = "auto"
|
||
|
||
$(".bmy_dialog_cancel").onclick = (e) => {
|
||
e.stopPropagation()
|
||
this.close();
|
||
}
|
||
|
||
$(".bmy_dialog_confirm").onclick = (e) => {
|
||
e.stopPropagation()
|
||
this.defaultOption.confirm()
|
||
this.defaultOption.onconfirm()
|
||
this.close();
|
||
}
|
||
|
||
if (this.defaultOption.closeOnClickOverlay) {
|
||
$(".bmy_dialog").onclick = () => {
|
||
|
||
this.close();
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
open () {
|
||
this.initHTML()
|
||
}
|
||
|
||
close () {
|
||
$("body").removeChild($(".bmy_dialog"))
|
||
this.defaultOption.cancel()
|
||
this.defaultOption.oncancel()
|
||
}
|
||
|
||
|
||
oncancel(callback) {
|
||
this.defaultOption.oncancel = callback
|
||
}
|
||
|
||
onconfirm(callback) {
|
||
this.defaultOption.onconfirm = callback
|
||
}
|
||
}
|
||
|
||
function open () {
|
||
|
||
}
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
} |