UIkit3:使用UIkit.modal.confirm确认UIkit.modal.prompt中的用户输入

时间:2019-06-16 13:14:30

标签: javascript getuikit

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

1 个答案:

答案 0 :(得分: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" />