通过手机物理返回键实现弹出层的隐藏
<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预编译器 */.popupwidth 100vwheight 100vhoverflow hiddenposition relativeh1text-align centerfont-size 50pxline-height 80px.popwidth 100vwheight 30vhtext-align centerline-height 30vhfont-size 40pxbackground-color lightgrayposition absoluteleft 0bottom -30vhtransition all 800ms.upbottom 0.closewidth 60pxheight 40pxline-height normalposition absoluteright 0top 0font-size 28pxcolor red
</style>
