H5 van popup full screen pop-up window, simulates the page fallback effect, supports the return button in the upper left corner, and is suitable for physical return, side sliding and bottom return key

First step ：
1、 Definition animateDuration Variable
2、 Definition open Event execution method selectProjectOpenHandler
3、 Definition close Event execution method selectProjectCloseHandler

data () {
    
    return {
    
      animateDuration: 0.3 //  Default pop-up animation time 0.3s
    }
},

The second step ：van-popup Use ：

<!-- van-popup  -->
 <van-popup 
    v-model="_show" 
    position="right" 
    :overlay="false"
   :style="{ width: '100%', height: '100%' }" 
   :duration="animateDuration" 
    @open="selectProjectOpenHandler" 
    @close="selectProjectCloseHandler">
                    <!--  Pop-up content  -->
</van-popup>

The third step ：
selectProjectOpenHandler：

// popup open 
selectProjectOpenHandler () {
    
  window.history.pushState(null, null, '#') //  Simulate a new page history Record 
  window.addEventListener('popstate', this.popstateHandler) // add to popstate Event monitoring 
}
popstateHandler (e) {
    
 	this.animateDuration = 0 //  Prevent side slip from animating many times 
  	this._show = false // close van-popup
}

selectProjectCloseHandler:

// popup close 
selectProjectCloseHandler () {
    
    window.removeEventListener('popstate', this.popstateHandler, false)
},

Step four ： Button returns the method goBack （ important ！）

goBack () {
    
  window.history.back() //  Delete van-popup Added when opening history
  this._show = false
},

The bar effect ！！！ Specific business needs can be adjusted by themselves