0

为了方便地更改不同场景的 Alertify 样式，我编写了一个函数来做到这一点。这个函数有一个参数叫做'marker'。

此函数将根据参数将 alertify.defaults.theme.ok 更改为不同的样式。说如果标记是“危险”，alertify.defaults.theme.ok 将是“btn-danger”（我使用的是 BS4），如果标记是“成功”，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');
          } 
   );
}

我不确定我是否忘记了什么或做错了什么，请帮忙。任何形式的帮助将不胜感激。

4

1 回答 1

1

如文档中所述，这些是仅在组件初始化之前使用的全局默认值。要重新应用它们，只需调用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'});
    }
}
于 2021-04-14T02:37:36.147 回答