Bootstrap Vue - 메시지박스 확인 모드를 타임아웃할 수 있는 방법이 있습니까?

Bootstrap Vue - 메시지박스 확인 모드를 타임아웃할 수 있는 방법이 있습니까?

JS와 stackoverflow는 모두 처음이라 좀 더 자세히 설명해야 하는지, 더 나은 방법이 있는지 알려주세요.

목표는 입력이 제공되지 않는 설정 시간 후 모달(가능하면 msgBoxConfirm 모달)을 닫거나 프로그래밍 방식으로 "취소"하는 것입니다.set Timeout으로 랩을 해서 타임아웃 함수를 호출하려고 했는데 두 번 다 실패했습니다.

다음은 타임아웃을 추가하고 싶은 코드의 골격입니다.

timedModalAlert: function () {
  this.$bvModal.msgBoxConfirm('Session expiration in XX. Press OK to continue.')
  .then(value => {
    if (value == true) {
      // function to refresh token
    } else {
      // function to log user out
    }
  }
  )
}

나의 시도:

timedModalAlert: function () {
  setTimeout (() => {
  this.$bvModal.msgBoxConfirm('Session expiration in XX. Press OK to continue.')
  .then(value => {
    if (value == true) {
      // function to refresh token
    } else {
      // function to log user out
    }
  }
  )
}, 1000)

Bootstrap-Vue에는 모드를 숨기는 방법이 있습니다.$bvModal.hide파라미터로 modal id를 사용합니다.그 말은 당신이 당신의 모달에게ID나중에 다시 닫을 수 있습니다.

$bvModal.msgBoxConfirm에서는 두 번째 파라미터로 다양한 옵션을 사용할 수 있습니다.포함ID그래서 우리가 우리의 메시지 박스를 준다면ID그럼 이걸 쓰면 되겠네요ID를 사용하여 x시간이 경과한 후 다시 닫으려면setTimeout그리고.$bvModal.hide

new Vue({
  el: '#app',
  methods: {
    openModal() {
      const modalTimeoutSeconds = 3;
      const modalId = 'confirm-modal'
      let modalSetTimeout = null;      

      this.$bvModal.msgBoxConfirm(`Session expiration in ${modalTimeoutSeconds} seconds. Press OK to continue.`, {
        id: modalId
      })
      .then(wasOkPressed => {
        if(wasOkPressed) {
          /* Do something */
        } else {
          /* Do something else */
        }
      })
      .catch(() => {
        console.log('The modal closed unexpectedly')
      })
      .finally(() => {
        clearTimeout(modalSetTimeout)
      })
      
      modalSetTimeout = setTimeout(() => {
        this.$bvModal.hide(modalId)
      }, modalTimeoutSeconds * 1000)
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.14.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.14.0/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-btn @click="openModal">
    Open Modal
  </b-btn>
</div>

setTimeout타임아웃이 경과한 후에 함수가 호출되기 때문에 코드에서는 메시지박스가 1초 지연됩니다.

원하는 결과를 얻으려면 로그아웃을 일으키는 타이머를 시작하고 메시지 상자를 표시해야 합니다.사용자가 [OK]를 클릭하지 않거나 [In time]를 클릭하지 않으면 로그아웃 됩니다.그렇지 않으면 타임아웃이 취소되고 세션이 새로 고쳐집니다.

timedModalAlert: function () {
  let modalId = 'my-modal'
  // Start a timeout, recording the timeout ID for cancelling it
  let timeoutID = setTimeout (() => {
    // function to close the dialog
    this.$bvModal.hide(modalId)
    // OR 
  }, x) // Set the timeout value in ms
  // Display the message box
  this.$bvModal.msgBoxConfirm('Your session will expire in x. Press OK to continue.', { id: modalId } )
    .then(value => {
      if (value == true) {
        // Stop the timeout
        clearTimeout(timeoutID)
        // function to refresh token
      } else {
        // function to log user out
      }
    })
}

언급URL : https://stackoverflow.com/questions/61876313/bootstrap-vue-is-there-any-way-to-time-out-a-message-box-confirmation-modal