经由过程手机物理返回键完成弹出层的隐蔽

<template>
  <div class="popup">
    <h1 @click="popup">返回键隐蔽弹出层</h1>
    <div class="pop" :class="{up: flag}">弹出层文本
      <--点击封闭完成弹出层隐蔽-->
      <span class="close" @click="close">封闭</span>
    </div>
  </div>
</template>

<script>
  /*
  *  总的完成头脑即为经由过程一个开关的true或false值来推断是不是需要来增加一条空的历史记录
  * */
  export default {
    data() {
      return {
        flag: false
      }
    },
    mounted() {
      // 当增加历史记录时，经由过程window下绑定popstate函数举行监听
      if (window.history && window.history.pushState) {
        window.addEventListener('popstate', (e) => {
          this.flag = false
        })
      }
    },
    methods: {
      popup() {
        // 经由过程class名up的开关flag完成是不是经由过程window.history.pushState增加一条空的历史记录
        if (!this.flag) {
          window.history.pushState(null, null, '')
        }
        this.flag = true
      },
      close() {
        // 点击封闭时，削减一条历史记录
        window.history.go(-1)
        this.flag = false
      }
    }
  }
</script>

<style scoped lang="stylus">
 /* 此处用的stylus预编译器 */
  .popup
    width 100vw
    height 100vh
    overflow hidden
    position relative
    h1
      text-align center
      font-size 50px
      line-height 80px
    .pop
      width 100vw
      height 30vh
      text-align center
      line-height 30vh
      font-size 40px
      background-color lightgray
      position absolute
      left 0
      bottom -30vh
      transition all 800ms
    .up
      bottom 0
    .close
      width 60px
      height 40px
      line-height normal
      position absolute
      right 0
      top 0
      font-size 28px
      color red
</style>