h5-colexiu/src/components/col-popup/index.tsx

import { Popup } from "vant";
import { defineComponent } from "vue";
import qs from 'query-string';

export default defineComponent({
  name: 'col-popup',
  props: {
    popupStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      popupShow: false,
    }
  },
  watch: {
    popupStatus(val) {
      this.hashState()
    }
  },
  mounted() {
    window.addEventListener('hashchange', this.onHash, false)
  },
  unmounted() {
    window.removeEventListener('hashchange', this.onHash, false)
  },
  methods: {
    onHash() {
      this.$emit("update:popupStatus", false);
    },
    onPopupClose(val: boolean) {
      this.$emit("update:popupStatus", val);
      this.hashState();
    },
    hashState() {
      // 打开弹窗
      if (this.popupStatus) {
        const splitUrl = window.location.hash.slice(1).split('?');
        const query = qs.parse(splitUrl[1]);
        let times = 0
        for (let key in query) {
          times++
        }
        const origin = window.location.href
        const url = times > 0 ? '&cPop=' + (+new Date()) : '?cPop=' + (+new Date())
        history.pushState("", "", `${origin}${url}`)
      } else {
        const splitUrl = window.location.hash.slice(1).split('?');
        const query = qs.parse(splitUrl[1]);
        if (query.cPop) {
          window.history.go(-1)
        }
      }
      if (this.$refs.protocolPopup) {
        (this.$refs.protocolPopup as any).scrollTop = 0
      }
    }
  },
  render() {
    return (
      <Popup ref="protocolPopup" show={this.popupStatus} transitionAppear={true} position="bottom" style={{ height: '100%' }}>
        {this.$slots.default && this.$slots.default()}
      </Popup>
    )
  }
})