Vue implements a mobile terminal mask layer instance to shield sliding, vue mask

Vue implements a mobile terminal mask layer instance to shield sliding, vue mask

Before wasting everyone's time, let's get started with the code. It's easy to use vue ......

  <div class="overlayer" @touchmove.prevent >  </div>

Yes, it's that simple.@touchmove.preventYou can shield the sliding page, and then add some styles like the normal mask layer.

/* Mask Layer */. overlayer {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10 ;}

In this way, you can _ (: Strong) Success) _. vue is really easy to use ......

The following are nonsense and principles:

There is a common requirement when developing mobile pages. When a pop-up window appears, it is prohibited to slide the main page behind the pop-up window;

In fact, most of the pop-up window plug-ins (or components) have such a feature, so I have never studied it myself;

In this project, a pop-up window needs to be written by myself ...... I immediately pushed QwQ.

Although there is no idea, the Code still needs to be written, the effect still needs to be realized, and the problem still needs to be solved. The first step for programmers to solve the problem is to go to Baidu first;

Generally speaking, common problems can be solved directly by Baidu. If Baidu does not want to solve such common requirements as asking people and shielding sliding masks, there will naturally be a lot of solutions, ...... There are too many choices.

I tried a set of solutions and gave up my plans to continue trying ...... Let's go through other people's source code.

First, I thought of the popup component in the mint ui;

I read it carefully and found that this mask layer didn't do anything, that is, it blocked the touchmove event. I got this idea and went back and checked the information. The screen on the mobile terminal slides, in fact, it is the default behavior of the touchmove event. In the bubble process, any layer that blocks this default behavior can block screen sliding, understand the principle, and implement it easily, the traditional method is to add a touchmove event processor to the body and use it when displaying the mask layer..preventDefault()The method is used to prevent default behaviors, while vue is simpler. All the pop-up windows and the like are written inside the elements of the mask layer, and then an event processor that cancels the default behavior is directly added to the mask layer, you can ~

Note!

If the pop-up window is not inside the mask layer, the bubble will not pass through the mask layer, and the sliding 0.0 will not be blocked.

<Div class = "overlayer" @ touchmove. prevent> </div> <div class = "popup"> If you slide in this div, The triggered event does not pass through the overlayer, and thus the sliding cannot be blocked. </div>

If the pop-up window cannot be placed in the mask layer, you can add a separate. prevent modifier to the pop-up window. The following two methods are valid:

<! -- Plan A --> <div class = "overlayer" @ touchmove. prevent> <div class = "popup"> If you slide in this div, The triggered event will go through the overlayer to shield the slide </div> <! -- Plan B --> <div class = "overlayer" @ touchmove. prevent> </div> <div class = "popup" @ touchmove. prevent> If you slide in this div, the default behavior of the triggered event is also disabled, and the sliding behavior can be blocked. </div>

PC end solution

This shielding method only shields sliding, which is not valid for the mouse wheel on the PC end, but it is also very easy to shield the mouse wheel. Just change the touchmove event processor to the processor of the scroll event ~ Like this:

  <div class="overlayer" @scroll.prevent >  </div>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.