H5 van-popup全屏弹窗模拟回退效果，左上角返回（支持物理、侧滑返回）

最新推荐文章于 2025-07-18 14:24:27 发布

原创最新推荐文章于 2025-07-18 14:24:27 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

1、弹框组件

Vue.component('custom-agreement', {
    template: `
     <van-popup
      class="custom-popup"
      v-model="visible"
      :overlay="overlay"
      :style="{ width: width, height: height }"
      :duration="animateDuration"
      @open="openHandler"
      @close="closeHandler"
    >
      <slot name="popupContent"></slot>
     </van-popup>
    `,
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      // 是否显示遮罩层
      overlay: {
        type: Boolean,
        default: false
      },
      // 过渡动画时长，单位为毫秒
      animateDuration: {
        type: Number,
        default: 0
      }
    },
    methods: {
      openHandler () {
        this.$emit('open-handler')
      },
      closeHandler () {
        this.$emit('close-handler')
      }
    }

使用方式：

<custom-agreement :visible.sync="agreementVisible" :animate-duration="animateDuration" @open-handler="openHandler"
  @close-handler="closeHandler">
  <template slot="popupContent">
    <div class="agreementContainer">
      <div class="agreementHeader">
        <i class="el-icon-arrow-left" @click="agreementVisible = false"></i>
        <div class="agreementTitleText">{{agreementInfo.title}}</div>
      </div>
      <div class="agreementContent" v-html="agreementInfo.content"></div>
    </div>
  </template>
</custom-agreement>

data() {
  return {
    agreementVisible: false,
    animateDuration: 0.3,
    agreementInfo: {},
  }
}

methods: {
  handlerAuthorizationFile () {
    this.agreementVisible = true
  },
  openHandler () {
    window.history.pushState(null, null, '#') // 模拟新的一页history记录
    window.addEventListener('popstate', this.popstateHandler)
  },
  popstateHandler () {
    this.animateDuration = 0
    this.agreementVisible = false
    this.applyVisible = true
  },
  closeHandler () {
    window.removeEventListener('popstate', this.popstateHandler, false)
  }
}