When the pop-up window appears, it is forbidden to slide the main page behind the pop-up window

//Code example Add @touchmove.prevent to block sliding pages, and then add some styles like ordinary mask layers.
//There is a very common requirement when developing mobile pages. When a pop-up window appears , Prohibit the main page behind the sliding pop-up window
//The screen sliding on the mobile terminal is actually the default behavior of the touchmove event. The traditional method is to add a touchmove event handler on the body, and use .preventDefault() when displaying the mask layer. The method prevents the default behavior
// and vue is simple, write the pop-up window and the like inside the mask layer element, and then directly add an event handler to cancel the default behavior on the mask layer

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

</div>
.overlayer{
position:fixed;
left:0;
top:0;
z-index:10;
}


//If you really can't put the popup window in the mask layer, then give the popup It is also possible to add a separate .prevent modifier to the 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 overlay, which can block the slide
</div>
< /div>

<!-- plan B -->

<div class="overlayer" @touchmove.prevent></div>
<div class="popup" @touchmove.prevent>
//If you slide in this div, the triggered event will also be disabled by default, and it can also be blocked Sliding
</div>

//pc-side solution
//This shielding method only shields sliding, which is invalid for the mouse wheel on the PC side, but the touchmove event handler for shielding the mouse wheel is changed to scroll event handling
<div class="overlayer" @scroll.prevent></div>