javascript - 在 vis.js 中使用 SweetAlert2

Question

使项目在 vis.js 中可编辑, 它使用回调 SweetAlert 没问题

我想使用 SweetAlert2利用它的新功能，但是它使用 Promise 而不是回调，而 vis.js 使用回调!

这是取自 http://visjs.org/examples/timeline/editing/editingItemsCallbacks.html 的示例代码:

第 47 到 57 行和第 129 到 137 行，其中 vis.js 调用 SweetAlert 进行提示:

onAdd: function (item, callback) {
      prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) {
        if (value) {
          item.content = value;
          callback(item); // send back adjusted new item
        }
        else {
          callback(null); // cancel item creation
        }
      });
    },

function prettyPrompt(title, text, inputValue, callback) {
    swal({
      title: title,
      text: text,
      type: 'input',
      showCancelButton: true,
      inputValue: inputValue
    }, callback);
  }

那么如何修改它以使用 SweetAlert2？

Answer 1

给你:

var items = new vis.DataSet([
  {id: 1, content: 'item 1', start: new Date(2013, 3, 20)}
]);

var min = new Date(2013, 3, 1); // 1 april
var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april

var container = document.getElementById('visualization');
var options = {
  editable: true,

  onAdd: function (item, callback) {
    swal({
      title: 'Add item', 
      text: 'Enter text content for new item:', 
      input: 'text', 
      inputValue: item.content
    }).then( function(result) {
      if (result.value) {
        item.content = result.value;
        callback(item); // send back adjusted new item
      }
    });
  }
};
var timeline = new vis.Timeline(container, items, options);

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>

Double-click to create a new item: 
<div id="visualization"></div>