Solve the problem that Mask mask of popup component in vux is at the top layer

Problem description:

On IOS devices, the mask layer is displayed on top of the pop-up content, which causes the pop-up content to fail to display the content and respond to click events normally

Solution:

Find out whether the CSS attribute is set on the ancestor DOM node of the Popup component:-webkit-overflow-scrolling: touch;

If the CSS attribute is set, it can be removed.

Additional knowledge: Perfect solution to the sliding penetration problem of popup component of VUX

Recently, the popup component of vux was used as a pop-up window. When it was used in a real machine, it was found that there was a problem of sliding penetration, that is, when the content was slid in the pop-up window, the underlying content would also slide, which was very bad.

Needless to say, go directly to the solution:

The core is to add a fixed position to the root div.

The specific implementation is as follows:

<template>
 <div id='discounts' :class="{'fixed-touch':showDetail}">
    <button @click="showDetail=true"> Eject popup Component </button>
   //  Mask layer 
    <div class="overlayer" @touchmove.prevent v-show="showDetail" @click="showDetail=false"></div>
   //  Pay attention here, to put popup The mask display of the component is set to false
    <popup v-model="showDetail" position="bottom" max-height="80%" should-rerender-on-show :show-mask="false">
      <div class="popup-style"> Popup contents </div>
    </popup>
  </div>
</template>

<script>
import { Popup } from 'vux'
export default {
 data () {
  return {
    showDetail: false
    }
  },
 components: {
  Popup
 }
}
</script>

<style>
.fixed-touch {position: fixed;}
.overlayer{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 500;
  background-color: #000;
  opacity: .5;
 }
</style> 　 

According to the above method, the problem of sliding penetration of popup component of vux at the mobile end can be perfectly solved.