问题描述
为了方便地改变不同场景的 Alertify 样式,我编写了一个函数来这样做。这个函数有一个参数叫做'marker'。
此函数将根据参数将 alertify.defaults.theme.ok 更改为不同的样式。说如果标记是 'danger',alertify.defaults.theme.ok 将是 'btn-danger'(我使用的是 BS4),如果标记是 'success',alertify.defaults.theme.ok 将是 'btn -success',见下图:
function formatAlertifyStyle(marker){
alertify.defaults.transition = 'slide';
alertify.defaults.theme.ok = 'btn btn-success';
alertify.defaults.theme.cancel = 'btn btn-light';
alertify.defaults.theme.input = 'form-control';
if (marker == 'danger') {
alertify.defaults.theme.ok = 'btn btn-danger';
alertify.confirm().set('labels',{ok: 'Confirm'});
}
if ( marker == 'warning') {
alertify.defaults.theme.ok = 'btn btn-warning';
alertify.confirm().set('labels',{ok: 'Ok'});
}
if (marker == 'success') {
alertify.defaults.theme.ok = 'btn btn-success';
alertify.alert().set('labels',{ok: 'Ok'});
}
}
通常情况下,它工作正常,但如果您在一个函数中多次调用它,第二次和之后的将无法工作。 alertify 使用第一个 alerfity.defaults.theme.ok 无论您将其更改为其他内容多少次。这是我如何使用它:
function doDelete(){
// Change Alertify style to 'btn-danger'
formatAlertifyStyle('danger');
alertify.confirm(
'Confirm','Description......',function(){
$.ajax({
url:xxx,data:{},success:function(result){
if(result==true){
// Change Alertify style to 'btn-success'
// and it doesn't work!
formatAlertifyStyle('success');
}
}
});
},function(){
alertify.error('Canceled');
}
);
}
我不确定是我忘记了什么还是做错了什么,请帮忙。 任何形式的帮助将不胜感激。
解决方法
如 docs 中所述,这些是仅在组件初始化之前使用的全局默认值。要重新应用它们,只需调用 destroy()
以便在新实例上反映新的默认值。
function formatAlertifyStyle(marker){
alertify.defaults.transition = 'slide';
alertify.defaults.theme.ok = 'btn btn-success';
alertify.defaults.theme.cancel = 'btn btn-light';
alertify.defaults.theme.input = 'form-control';
if (marker == 'danger') {
alertify.confirm().destroy();
alertify.defaults.theme.ok = 'btn btn-danger';
alertify.confirm().set('labels',{ok: 'Confirm'});
}
if ( marker == 'warning') {
alertify.confirm().destroy();
alertify.defaults.theme.ok = 'btn btn-warning';
alertify.confirm().set('labels',{ok: 'Ok'});
}
if (marker == 'success') {
alertify.alert().destroy();
alertify.defaults.theme.ok = 'btn btn-success';
alertify.alert().set('labels',{ok: 'Ok'});
}
}