Background: 1. I met a small demand these days: when the user filled in the form and did not save it, he clicked another button, prompting whether to save it or not. If no, exit the current page and proceed to the next step

  • When the product put forward this requirement, I had no waves in my heart, thinking, isn’t this very simple ~~~ directly use vue-Router components beforeRouteLeave not on the line. However, it is still too young. So, to sum it up here, keep a note for yourself.

  • Project Introduction: Our project is based on the development of vue bucket, packaged static files and elector packaged into APP project. The layout of the required page is as follows: Traditional layout. After the user fills in the form in content area 3, click areas 1 and 2 to prompt the user whether to save.

  • My initial development idea was to call the vue-Router component’s internal guard and determine when the router leaves. However, it’s not as simple as this: beforeRouteLeave can only “intercept” route changes before the router leaves.

  • For our project, clicking on the left list area 2 and the header menu area 1 will modify the state of VUEX, resulting in the change of the basic data of area 3, thus triggering the request to refresh the content area.

In other words: beforeRouteLeave does not work as desired. Because beforeRouteLeave can’t prevent events triggered by JS. If you want to stop an event, it’s natural to think of capture and bubbling. But a new problem arose. Even if the event is blocked, what should we do next with the requirements inside?

My idea is to record the event of the event while preventing the event from propagating. When the user confirms that the cancellation is not saved, the event’s targrt will continue to execute the previous event.

Specific practices:

  1. Add A status variable in vuEX to indicate whether the form data has been modified
  2. In the outermost layer of region 1 and 2, the binding function performs event capture, and the function determines, according to A, whether to prevent bubbling. If the 1 and 2 fields are clicked, proceed to the next step.
  3. Determine whether the form data is modified, then distribute the central event, pass the parameter event, and let the content area handle the pop-up box by itself, waiting for user confirmation.
    verifyProjuctDataHandler(e){
     if(A){
       e.stopPropagation()
       console.log('Distribute click other area events');
       window.eventHub.$emit('clickOtherArea', e)
       return false}},Copy the code

4. If the user clicks cancel, perform the corresponding operation, execute the requirements and carry out the event of the next distributed event, obtain the click coordinates, and simulate the operation. Effect achieved: The simulation event pauses and continues execution.

    // Simulate mouse click coordinates (x,y)
   function clickPoint(x, y){
     var ev = new MouseEvent('click', {
         'view': window.'bubbles': true.'cancelable': true.'clientX': x,
         'clientY': y    });

     var el = document.elementFromPoint(x, y);

     el.dispatchEvent(ev);
   }

Copy the code

At this point, the basic development of requirements completed. If you have a better solution, please leave a message ~~~