IView Spin in vue Loading

In the click operation of some buttons, if there is no restriction, the user will click many times and send many requests to the background.

There is another case: when loading a page, if the data is not fully loaded, at this time, in order to prevent the user's operation, a mask will be displayed: Loading ... This operation is similar to the above, but it is triggered in different ways, one is in the life cycle, and the other is triggered by the user's click.

html:

css:

js:

html:

js:

When you use the mask method and verify before sending a request to the background, the verification prompt will be displayed as a pop-up message. When the user clicks it many times, the prompt message will appear repeatedly.

html:

js:

Css style: Pop up the mask layer and pull the scroll bar, and find that the mask layer does not cover the screen.

Solution: Replace absolute with fixed.

Iview style source code:

Change location: fixed;

If you write your own mask, the principle is the same.

site navigation