js的toastr怎么带有确定按钮

在JavaScript中，使用toastr插件时添加确定按钮的方法包括自定义HTML、使用回调函数、结合其他库。下面将详细介绍其中一种方法——结合其他库来实现。

一、引入所需的库

首先，我们需要引入toastr和Bootstrap（可选）的CSS和JS文件。具体步骤如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

二、使用Bootstrap模态框实现确定按钮

为了在toastr通知中添加确定按钮，我们可以结合Bootstrap模态框来实现。下面是具体实现步骤：

HTML模态框结构

<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">确认操作</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        您确定要继续吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="confirmBtn">确定</button>
      </div>
    </div>
  </div>
</div>

JavaScript代码

$(document).ready(function() {
  toastr.options = {
    "closeButton": true,
    "debug": false,
    "newestOnTop": false,
    "progressBar": true,
    "positionClass": "toast-top-right",
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
  };
  $('#confirmBtn').on('click', function() {
    toastr.success('您点击了确定按钮');
    $('#confirmModal').modal('hide');
  });
  toastr.info('点击这里进行确认操作', '信息', {
    "onclick": function() {
      $('#confirmModal').modal('show');
    }
  });
});

三、详细描述结合其他库

结合其他库（如Bootstrap）可以充分利用其丰富的UI组件和交互功能，使得toastr通知弹窗不仅具备提示功能，还可以通过模态框实现复杂的交互操作。这种方法的优势在于：

UI一致性：使用Bootstrap的模态框可以保持与应用整体UI风格一致。
易于扩展：模态框提供了更多的交互选项，可以轻松添加更多按钮、输入框等。
用户体验：模态框可以覆盖整个屏幕，确保用户注意到重要的确认操作。

通过结合其他库的方法，我们能够实现更多样化的交互功能，而不仅限于简单的通知弹窗。这样不仅提高了用户体验，还增加了应用的灵活性。

四、总结

在JavaScript中，使用toastr插件添加确定按钮的方法有多种，但结合其他库（如Bootstrap）的方法尤为推荐。通过自定义HTML、使用回调函数等方式，我们可以实现丰富的交互功能，提高应用的用户体验。无论选择哪种方法，都需要根据具体需求进行适配和扩展。

五、推荐项目管理系统

在项目团队管理中，使用合适的工具可以大大提高效率。推荐以下两个系统：

研发项目管理系统PingCode：专注于研发项目管理，提供全面的需求管理、任务追踪、版本管理等功能。
通用项目协作软件Worktile：适用于各类项目管理，支持任务分配、进度跟踪、团队协作等多种功能。

选择合适的项目管理系统，可以帮助团队更好地协作、提高项目管理效率。