How to implement window closing pop-up prompt in Vue

With the continuous development and application of front-end technology, Vue has become the first choice of more and more front-end engineers. However, in the process of using Vue to develop pages, if there are no appropriate prompts, it may give users a bad experience.

In web applications, the closing of a window can be triggered in a variety of situations, such as the user pressing the browser's close button, pressing the browser shortcut key, ending the process, etc. If we directly use the Vue component to develop the page without processing the window closing, the user may encounter no prompt when closing, which affects the user experience.

To solve this problem, we need to add a window closing prompt in Vue. Next, we will introduce how to implement a window closing pop-up prompt in Vue.

1. Add a window closing event listener

In the Vue component, we need to first add a window close event listener through the mounted hook function, as shown below:

mounted () {
  window.addEventListener('beforeunload', this.handleWindowClose)
}

Among them, the beforeunload event is triggered when the window is about to close. In the event processing function handleWindowClose, we can perform corresponding prompt processing.

2. Processing window closing prompts

In the event processing function, different prompt processing can be formulated as needed. For example, when the user is editing a form, if the window is closed, they need to be asked whether to save the changes. We can use window.confirm to pop up the dialog box, the code is as follows:

handleWindowClose (event) {
  if (formIsDirty()) {
    event.preventDefault()
    event.returnValue = ''
    if (window.confirm('是否保存修改？')) {
      saveForm()
    }
  }
}

In the above code, formIsDirty, saveForm are customized Function used to determine whether the form has been modified and save it. event.preventDefault() and event.returnValue = '' are used to prevent the system's default window closing behavior to ensure that the current prompt box can pop up normally.

In addition to confirming saving changes, we can also add other prompts. For example, when there is unsaved data, the user is prompted to confirm whether to leave the page. The code is as follows:

handleWindowClose (event) {
  if (formIsDirty()) {
    event.preventDefault()
    event.returnValue = ''
    if (window.confirm('您有未保存的数据，是否确认离开？')) {
      // 不做处理，直接关闭窗口
    }
  }
}

In the above code, we close the window directly without doing any processing, and the user needs to save the data manually.

In addition, we can also use customized prompt boxes to provide more friendly prompt content. For example, using the Vue plug-in vue-snotify, you can implement a prompt box similar to a barrage. The code is as follows:

import Snotify, { SnotifyPosition } from 'vue-snotify'

Vue.use(Snotify)

// ...

handleWindowClose (event) {
  if (formIsDirty()) {
    event.preventDefault()
    event.returnValue = ''
    this.$snotify.confirm('您有未保存的数据，是否确认离开？', {
      position: SnotifyPosition.rightTop,
      closeOnClick: false,
      buttons: [
        { text: '否', action: () => {}},
        { text: '是', action: () => window.close()}
      ]
    })
  }
}

In the above code, we introduced the vue-snotify plug-in and called the this.$snotify.confirm method in the processing function, to pop up a custom confirmation box. The framework provides a wealth of configuration items that can be configured according to actual conditions.

Summary

The above is the method to implement the window closing pop-up prompt in Vue. By adding a listener for the window closing event and performing corresponding prompt processing in the event processing function, the user experience of the web application can be improved.

Of course, for some special needs, we can also customize the style of the window closing prompt and save unfinished operations through Ajax and other methods to achieve a more advanced user prompt experience.

The above is the detailed content of How to implement window closing pop-up prompt in Vue. For more information, please follow other related articles on the PHP Chinese website!