提示组件优化

feat/task1-c-wallet
Devil 2021-08-16 13:18:33 +08:00
parent 9dbe3005f0
commit bfb462b623
2 changed files with 59 additions and 42 deletions

View File

@ -63,12 +63,12 @@ form.am-form .am-form-group-refreshing, .plug-file-upload-view { border-bottom:
/**
*
*/
#common-prompt {position:fixed;top:20px;left:0;right:0;text-align:center;padding:10px 15px;font-size:14px;z-index:10000; border-radius: 2px; width: 260px; margin: 0 auto; word-break: break-all;}
#common-prompt.am-alert-danger { background-color: #fef0f0; border-color: #f9d4d4; color: #f56c6c; box-shadow: 0 2px 4px #fef0f0, 0 0 6px rgba(0, 0, 0, 0); }
#common-prompt.am-alert-warning { background-color: #ffe7d5; border-color: #fbceac; color: #f37b1d; box-shadow: 0 2px 4px #ffe7d5, 0 0 6px rgba(0, 0, 0, 0); }
#common-prompt.am-alert-success { background-color: #e3fbd6; border-color: #bbe8a3; color: #67c23a; box-shadow: 0 2px 4px #e3fbd6, 0 0 6px rgba(0, 0, 0, 0); }
#common-prompt .prompt-content { text-align: left; font-size: 12px; }
#common-prompt .prompt-msg {width: calc(100% - 50px);display: -webkit-inline-box;}
.common-prompt {position:fixed;top:20px;left:0;right:0;text-align:center;padding:10px 15px;font-size:14px;z-index:10000; border-radius: 2px; width: 260px; margin: 0 auto; word-break: break-all;}
.common-prompt.am-alert-danger { background-color: #fef0f0; border-color: #f9d4d4; color: #f56c6c; box-shadow: 0 2px 4px #fef0f0, 0 0 6px rgba(0, 0, 0, 0); }
.common-prompt.am-alert-warning { background-color: #ffe7d5; border-color: #fbceac; color: #f37b1d; box-shadow: 0 2px 4px #ffe7d5, 0 0 6px rgba(0, 0, 0, 0); }
.common-prompt.am-alert-success { background-color: #e3fbd6; border-color: #bbe8a3; color: #67c23a; box-shadow: 0 2px 4px #e3fbd6, 0 0 6px rgba(0, 0, 0, 0); }
.common-prompt .prompt-content { text-align: left; font-size: 12px; }
.common-prompt .prompt-msg {width: calc(100% - 50px);display: -webkit-inline-box;}
/**
*

View File

@ -8,48 +8,66 @@
* @param {[string]} type [类型失败:error, 警告:warning, 成功:success]
* @param {[int]} time [自动关闭时间, 默认3秒]
*/
var temp_time_out;
function Prompt(msg, type, time)
{
if(msg != undefined && msg != '')
{
// 是否已存在提示条
if($('#common-prompt').length > 0)
// 存在的提示信息则不继续
var status = true;
$('.common-prompt').each(function(k, v)
{
clearTimeout(temp_time_out);
if(status && $(this).find('.prompt-msg').text() == msg)
{
status = false;
}
});
if(status)
{
// 是否已存在提示条
var height = 55;
var length = $('.common-prompt').length;
// 提示信息添加
if((type || null) == null)
{
type = 'danger';
}
// icon图标, 默认错误
var icon = 'am-icon-times-circle';
switch(type)
{
// 成功
case 'success' :
icon = 'am-icon-check-circle';
break;
// 警告
case 'warning' :
icon = 'am-icon-exclamation-circle';
break;
}
var index = parseInt(Math.random()*1000001);
var html = '<div class="common-prompt common-prompt-'+index+' am-alert am-alert-'+type+' am-animation-slide-top" data-index="'+index+'" style="top:'+((height*length)+20)+'px;" data-am-alert><button type="button" class="am-close">&times;</button><div class="prompt-content"><i class="'+icon+' am-icon-sm am-margin-right-sm"></i><p class="prompt-msg">'+msg+'</p></div></div>';
$('body').append(html);
// 自动关闭提示
setTimeout(function()
{
$('.common-prompt-'+index).slideToggle(300, function()
{
$('.common-prompt-'+index).remove();
$('.common-prompt').each(function(k, v)
{
$(this).animate({'top':(k*height+20)+'px'});
});
});
}, (time || 3)*1000);
return true;
}
// 提示信息添加
$('#common-prompt').remove();
if((type || null) == null)
{
type = 'danger';
}
// icon图标, 默认错误
var icon = 'am-icon-times-circle';
switch(type)
{
// 成功
case 'success' :
icon = 'am-icon-check-circle';
break;
// 警告
case 'warning' :
icon = 'am-icon-exclamation-circle';
break;
}
var html = '<div id="common-prompt" class="am-alert am-alert-'+type+' am-animation-slide-top" data-am-alert><button type="button" class="am-close">&times;</button><div class="prompt-content"><i class="'+icon+' am-icon-sm am-margin-right-sm"></i><p class="prompt-msg">'+msg+'</p></div></div>';
$('body').append(html);
// 自动关闭提示
temp_time_out = setTimeout(function()
{
$('#common-prompt').slideToggle();
}, (time || 3)*1000);
}
return false;
}
/**
@ -138,7 +156,6 @@ function GetFormVal(element, is_json)
{
if($(this).is(':checked'))
{
console.log(tmp);
if(tmp_all[tmp.name] == undefined)
{
tmp_all[tmp.name] = [];