Bootstrap Vue - 有什么方法可以使消息框确认模式超时吗？

Question

我是 JS 和 Whosebug 的新手，所以如果我需要提供更多细节，或者是否有更好的方法，请告诉我。

我的目标是关闭模态（最好是 msgBoxConfirm 模态），或者 "Cancel" 在没有给出输入的设定时间段后以编程方式关闭。我试过将它包装在 setTimeout 中并从 .then 中调用超时函数，但两次尝试都失败了。

这是我想添加超时的代码脚手架：

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)

Answer 1

setTimeout 导致您的函数在超时到期后被调用，因此您的代码所做的只是将消息框延迟一秒钟。

为了达到你想要的效果，你需要启动一个计时器，它会导致注销，然后显示消息框。如果用户没有点击确定，或者没有及时点击，他们将被注销。否则取消超时并刷新他们的会话：

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
      }
    })
}

Answer 2

Bootstrap-Vue 有一个隐藏模态的方法，$bvModal.hide，它以模态 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>

Bootstrap Vue - 有什么方法可以使消息框确认模式超时吗？

Bootstrap Vue - is there any way to time out a message box confirmation modal?

javascript

vuejs2

bootstrap-vue