我这里自定义了几个alert弹窗组件：
1：带有确定取消的alert弹窗组件：效果如下图所示
1.png
代码：
/**
* 自定义公共函数
*/
const utils =
{
/**
* @name: 自定义alert(确定，取消)
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-23
* @param: data string 显示的文字
* @param: callbackTure function 点击确定回调函数
* @param: callbackFalse function 点击取消回调函数
*/
alert(data: any, callbackTure: any = '', callbackFalse:any = '')
{
var alert_bg = document.createElement('div');
var alert_box = document.createElement('div');
var alert_text = document.createElement('div');
var alert_btn_true = document.createElement('div');
var alert_btn_false = document.createElement('div');
var textNode = document.createTextNode(data ? data : '')
var btnText_false = document.createTextNode('取 消');
var btnText_true = document.createTextNode('确 定');
// 控制背景样式
utils.setCss(alert_bg, {
'position': 'fixed',
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'background-color': 'rgba(0, 0, 0, 0.1)',
'z-index': '999999999'
});
// 控制 提示框样式
utils.setCss(alert_box, {
'width': '350px',
'max-width': '90%',
'font-size': '18px',
'text-align': 'center',
'background-color': '#fff',
'border-radius': '15px',
'position': 'absolute',
'top': '40%',
'left': '50%',
'transform': 'translate(-50%, -50%)'
});
// 控制提示字体样式
utils.setCss(alert_text, {
'padding': '32px 15px',
'border-bottom': '1px solid #ddd'
});
// 控制确定按钮样式
utils.setCss(alert_btn_true, {
'padding': '10px 0',
'color': '#007aff',
'font-weight': '600',
'cursor': 'pointer',
'float':'right',
'text-align': 'center',
'width': '49%',
});
// 控制取消按钮样式
utils.setCss(alert_btn_false, {
'padding': '10px 0',
'color': '#007aff',
'font-weight': '600',
'cursor': 'pointer',
'float': 'right',
'text-align': 'center',
'width': '50%',
'border-right': '1px solid #CCC',
});
// 内部结构套入
alert_text.appendChild(textNode);
alert_btn_true.appendChild(btnText_true);
alert_btn_false.appendChild(btnText_false);
alert_box.appendChild(alert_text);
alert_box.appendChild(alert_btn_true);
alert_box.appendChild(alert_btn_false);
alert_bg.appendChild(alert_box);
// 整体显示到页面内
document.getElementsByTagName('body')[0].appendChild(alert_bg);
// 确定按钮绑定点击事件
alert_btn_true.onclick = function () {
// alert_bg.parentNode.removeChild(alert_bg);
if (typeof callbackTure === 'function')
{
callbackTure(); //回调
}
utils.setCss(alert_bg, {
'display': 'none'
});
}
// 取消按钮绑定点击事件
alert_btn_false.onclick = function () {
if (typeof callbackFalse === 'function')
{
callbackFalse(); //回调
}
else if (typeof callbackTure === 'function')
{
callbackTure(); //回调
}
utils.setCss(alert_bg, {
'display': 'none'
});
}
},
/**
* @name: 自定义alert添加css
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-23
*/
setCss(targetObj:any, cssObj:any) {
var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
for (var i in cssObj)
{
str += i + ':' + cssObj[i] + ';';
}
targetObj.style.cssText = str;
},
}
调用示例：
utils
.
alertLoadExec
(
false
);
2：自定义alert，在自定义时间消失（仿layer），效果如下图所示：
2.gif
代码：
/**
* 自定义公共函数
*/
const utils =
{
/**
* @name: 自定义alert，在自定义时间消失
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-23
* @param: data string 显示的文字
* @param: callbackTure function 点击确定回调函数
* @param: time number 显示时间
*/
alertMsg(time: number, data: any = '', callbackTure: any = '') {
var alert_bg = document.createElement('div');
var alert_box = document.createElement('div');
var alert_text = document.createElement('div');
var textNode = document.createTextNode(data ? data : '')
// 控制背景样式
utils.setCss(alert_bg, {
'position': 'fixed',
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'z-index': '999999999'
});
// 控制 提示框样式
utils.setCss(alert_box, {
'width': '100%',
'max-width': '90%',
'font-size': '18px',
'text-align': 'center',
'border-radius': '15px',
'position': 'absolute',
'top': '40%',
'left': '50%',
'transform': 'translate(-50%, -50%)'
});
if (data)
{
// 控制提示字体样式
utils.setCss(alert_text, {
'width': '350px',
'border-bottom': '1px solid #ddd',
'padding': '16px 10px',
'color': 'white',
'background-color': 'rgba(0, 0, 0, 0.7)',
'opacity': 1,
'border-radius': '4px',
'margin': 'auto',
});
}
else
{
// 控制load图片显示样式
utils.setCss(alert_text, {
'width': '100px',
'height':'100px',
'background':' url("/src/assets/img/loading-0.gif") no-repeat center',
'margin':'auto'
});
}
// 内部结构套入
alert_text.appendChild(textNode);
alert_box.appendChild(alert_text);
alert_bg.appendChild(alert_box);
// 整体显示到页面内
document.getElementsByTagName('body')[0].appendChild(alert_bg);
setTimeout(function () {
if (typeof callbackTure === 'function') {
callbackTure(); //回调
}
// 弹窗消失~
utils.setCss(alert_bg, {
'display': 'none'
});
}, time);
},
/**
* @name: 自定义alert添加css
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-23
*/
setCss(targetObj:any, cssObj:any) {
var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
for (var i in cssObj)
{
str += i + ':' + cssObj[i] + ';';
}
targetObj.style.cssText = str;
},
}
调用实例：
utils
.
alertMsg
(
2000
,
'
发送消息不能为空！
'
);
3：自定义loading，在需要让他消失的时候让其消失 。
这个函数功能稍微有一丢丢复杂，我这里大概说一下，大概就是，在发送请求前显示loading，服务器返回数据之后，loading消失。就是这样一个小功能。
效果如下图所示：
3.gif
4.gif
我这里定义了一个全局变量，来存储loading的dom节点。
/**
* 自定义公共函数
*/
const utils =
{
/**
* @name: 下方自定义loading使用节点
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-02-22 21:28:32
*/
element : '',
/**
* @name: 执行显示loading（提示词）
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-02-22 21:32:27
* @param: sign boolean true:显示，false：删除
* @param: msg string 提示词
*/
alertLoadExec(sign:any,msg:any='')
{
if(sign)
{
utils.element = utils.alertLoading(true, msg);
}
else
{
if (utils.element)
{
utils.alertLoading(utils.element);
}
}
},
/**
* @name: 自定义loading，true/false
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-23
* @param: sign boolean true:显示，false：删除
* @param: msg string 提示词
*/
alertLoading(sign:any,msg:any='')
{
if (sign === true)
{
var alert_bg = document.createElement('div');
var alert_box = document.createElement('div');
var alert_text = document.createElement('div');
var textNode = document.createTextNode(msg ? msg : '')
// 控制背景样式
utils.setCss(alert_bg, {
'position': 'fixed',
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'z-index': '999999999'
});
// 控制 提示框样式
utils.setCss(alert_box, {
'width': '100%',
'max-width': '90%',
'font-size': '18px',
'text-align': 'center',
'border-radius': '15px',
'position': 'absolute',
'top': '40%',
'left': '50%',
'transform': 'translate(-50%, -50%)'
});
if (msg)
{
// 控制提示字体样式
utils.setCss(alert_text, {
'width': '350px',
'border-bottom': '1px solid #ddd',
'padding': '16px 10px',
'color': 'white',
'background-color': 'rgba(0, 0, 0, 0.7)',
'opacity': 1,
'border-radius': '4px',
'margin': 'auto',
});
}
else
{
// 控制load图片显示样式
utils.setCss(alert_text, {
'width': '100px',
'height': '100px',
'background': ' url("/src/assets/img/loading-0.gif") no-repeat center',
'margin': 'auto'
});
}
// 内部结构套入
alert_text.appendChild(textNode);
alert_box.appendChild(alert_text);
alert_bg.appendChild(alert_box);
// 整体显示到页面内
document.getElementsByTagName('body')[0].appendChild(alert_bg);
return alert_bg;
}
else
{
// for(var i = 0; i< sign.length;i++)
// {
// var _parentElement = sign[i].parentNode;
var _parentElement = sign.parentNode;
if (_parentElement) {
_parentElement.removeChild(sign);
}
// }
}
},
/**
* @name: 自定义alert添加css
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-23
*/
setCss(targetObj:any, cssObj:any) {
var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
for (var i in cssObj)
{
str += i + ':' + cssObj[i] + ';';
}
targetObj.style.cssText = str;
},
}
调用实例：
// 开启自定义loading
utils.alertLoadExec(true);
// 关闭自定义loading
utils.alertLoadExec(false);
以上就是我自定义的几个alert显示样式，
都是根据需求自己想的招，大概都是野路子。
有好的建议，请在下方输入你的评论。
欢迎访问个人博客
https://guanchao.site
