如何在一个函数中将 Alerfity.defaults.theme.ok 更改为不同的样式

如何解决如何在一个函数中将 Alerfity.defaults.theme.ok 更改为不同的样式

为了方便地改变不同场景的 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'});
    }
}