自定义的组件代码如下：
/*
*title 弹出框的标题
*titleColor 弹出框标题颜色
*message 提示语
*messageColor 提示语颜色
*backgroundColor 背景框颜色
*callBack 回调方法
*/
class UIConfirmAlert {
constructor(opts = {}) {
this._defaultOpts = {
zoom: 1,
title: '提示',
titleColor: '#fff',
message: '提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语',
messageColor: '#fff',
backgroundColor:"#494b5a",
callBack:null
};
//其他参数
this._opts = $.extend(this._defaultOpts, opts);
//绘制组件
this._draw();
}
/**
* 绘制组件
*/
_draw() {
let testStr = `<div class="alert_mark" style="width:100%;
height:100%;
position:fixed;
z-index:1000;
top: 0;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
display: flex;
align-items: center;
background-color:rgba(0,0,0,0.2);
zoom: ${this._opts.zoom};">
<div style="width:400px;background-color:${this._opts.backgroundColor};border-radius: 10px;">
<div class="alert_title" style="text-align: center;margin: 10px;color:${this._opts.titleColor}">${this._opts.title}</div>
<div style="height:1px;width:100%;border-bottom:1px solid gray;"></div>
<div style="justify-content: center;display: flex;align-items: center;">
<div style="margin: 20px 10px 20px 10px;color:${this._opts.messageColor}">${this._opts.message}</div>
</div>
<div style="height:1px;width:100%;border-bottom:1px solid gray;"></div>
<div class="dialog-footer" style="justify-content: center;display: flex;align-items: center;margin: 10px;">
<button type="button" class="dialog-btn-sure" style="background-color: #5a7bff;color:#fff;width:72px;height:32px;font-size:15px;padding: 0;border-radius: 21px;border-width: 0;">确认</button>
<div style="width:30px;"></div>
<button type="button" class="dialog-btn-cancel" style="background-color: #5a7bff;color:#fff;width:72px;height:32px;font-size:15px;padding: 0;border-radius: 21px;border-width: 0;">取消</button>
</div>
</div>
</div>`;
var body = document.getElementsByTagName("body");
$(body).append(testStr);
this._bindEvent();
}
_bindEvent() {
var self = this;
$(".dialog-btn-sure").click(function () {
self.cleanup()
});
$('.dialog-btn-cancel').click(function () {
$(".alert_mark").remove()
});
}
cleanup() {
if (this._opts.callBack){
this._opts.callBack();
}
$(".alert_mark").remove()
}
}
下面是组件的初始化，此自定义的组件是直接添加在body上面的，直接初始化就可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>components test</title>
<script src="./libs/jquery.min.js"></script>
<script src="UIConfirmAlert.js"></script>
</head>
<body style="width: 8640px; height: 7680px;">
</body>
<script>
new UIConfirmAlert({
message: "确定要关闭窗口嘛？", callBack: function () {
console.log("确定");
}
});
</script>
</html>
1588063840058.jpg
网友评论