javascript - UIkit3 : to confirm user input in UIkit. modal.prompt 使用 UIkit.modal.confirm

Question

我想使用UIkit.modal.confirm来确认用户在UIkit.modal.prompt中的输入，如果他们确认则继续，否则返回UIkit.modal.confirm.

UIkit.modal.prompt('Input','').then(function(input){
  UIkit.modal.confirm(input).then(function(){
    .... //proceed
  },function(){
    ..... // How do I got back to the previous prompt?
  })
})

Answer 1

这可能不是最好的解决方案，但它需要递归，所以我基本上将您的代码分为2 个独立的函数，一个用于提示(并要求确认)，另一个用于确认(并在需要时显示提示)。

代码已注释，因此您可以了解在哪一步发生了什么。

// run prompt on page load
prompt();

// display confirmation, after confirming, value is printed, if not confirmed, prompt is displayed again
function confirm(input) {
  UIkit.modal.confirm('Confirm ' + input + ' ?').then(
    function() {
      // input confirmed, set value to the field
      document.getElementById('confirmed-value').value = input;
    },
    function() {
      // input not confirmed, show prompt again
      prompt(input);
    }
  );
}

// display prompt, after entering value ask for confirmation, if empty, prompt again, if cancelled, stop showing prompt, if after cancelled confirmation, shows previously entered value
function prompt(input = "") {
  UIkit.modal.prompt('Please enter your value', input).then(function(input) {
    // prompt submitted, input is not null
    if (input) {
      confirm(input);
    }
    // prompt submitted, input is not null but is empty
    else if (input === "") {
      prompt();
    }
  });
}

// trigger prompt with the button click (example)
UIkit.util.on('#trigger-prompt', 'click', function() {
  prompt();
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" integrity="sha256-sO/kKFCHPL4rhYHDyHC2dwGlaIBttifOfQ0ZaGLAheo=" crossorigin="anonymous" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js" integrity="sha256-jN++RwBoYassp9qTuZDfQuptszFdL1Pm4dKZWS5KjjY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js" integrity="sha256-6pktS+jePPdXx9oCn8r4hS5jR1eq0Ry7vbifYtG0LDU=" crossorigin="anonymous"></script>

<button id="trigger-prompt" class="uk-button uk-position-top-center uk-button-primary uk-margin">PROMPT</button>
<output id="confirmed-value" class="uk-input uk-position-center" />