UIkit3：使用 UIkit.modal.confirm 在 UIkit.modal.prompt 中确认用户输入答案

【问题标题】：UIkit3: to confirm user input in UIkit.modal.prompt using UIkit.modal.confirmUIkit3：使用 UIkit.modal.confirm 在 UIkit.modal.prompt 中确认用户输入
【发布时间】：2019-10-30 07:56:35
【问题描述】：

我想使用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?
  })
})

【问题讨论】：

标签： javascript getuikit

【解决方案1】：

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

对代码进行了注释，以便您了解在哪个步骤中发生了什么。

// 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" />

【讨论】：