UIkit3: для подтверждения ввода пользователя в UIkit.modal.prompt с помощью UIkit.modal.confirm - PullRequest
Новая
       33

UIkit3: для подтверждения ввода пользователя в UIkit.modal.prompt с помощью UIkit.modal.confirm

4 голосов
/ 16 июня 2019

Я хочу использовать 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 Ответ

1 голос
/ 28 июня 2019

Возможно, это не лучшее решение, но оно должно быть рекурсивным, поэтому я в основном разделил ваш код на 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" />
...