vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

实现Vue弹窗时，监听手机返回键关闭弹窗功能可以通过以下步骤完成：

1. 在弹窗组件中，监听手机返回键的按下事件，如果弹窗处于打开状态，则关闭弹窗，否则执行默认的页面返回事件。具体代码如下：

<template>
  <div>
    <button @click="openModal">打开弹窗</button>
    <div v-show="isModalOpen" @click.self="closeModal" @keydown.esc="closeModal">
      <!-- 弹窗内容 -->
      <p>这是一个弹窗</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalOpen = false;
    },
    handleKeyPress(event) {
      if (event.keyCode === 27) {
        this.closeModal();
      }
    }
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyPress);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyPress);
  }
};
</script>

在上述代码中，我们在弹窗容器div上绑定了两个事件：@click.self和@keydown.esc，分别用于关闭弹窗和监听手机返回键。当isModalOpen为true时，弹窗才会显示。

1. 以上代码可以实现监听手机返回键关闭弹窗的功能，但是如果页面中有多个弹窗，或者弹窗不在根组件下，需要在每个弹窗组件中都重复实现这段代码，显然不是一个好的做法。我们可以将这段公共的代码抽离成一个混入对象，让所有的弹窗组件都继承这个混入对象，从而避免重复的代码。具体代码如下：

const closeModalMixin = {
  methods: {
    closeModal() {
      this.isModalOpen = false;
    },
    handleKeyPress(event) {
      if (event.keyCode === 27) {
        this.closeModal();
      }
    }
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyPress);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyPress);
  }
};

export default {
  name: 'Modal',
  mixins: [closeModalMixin],
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
    }
  },
  template: `
    <div>
      <button @click="openModal">打开弹窗</button>
      <div v-show="isModalOpen" @click.self="closeModal">
        <!-- 弹窗内容 -->
        <p>这是一个弹窗</p>
      </div>
    </div>
  `
};

在以上代码中，我们将关闭弹窗和监听手机返回键关闭弹窗的代码抽离到了一个混入对象closeModalMixin中，然后在弹窗组件中通过mixins选项引入这个混入对象即可。这样做的好处是，无论页面中有多少个弹窗组件，我们都只需要在混入对象中实现一次代码即可。

示例说明：

下面是一个示例，如何在Vue中监听手机返回键关闭弹窗：

<template>
  <div>
    <button @click="openModal">打开弹窗</button>
    <div v-show="isModalOpen" @click.self="closeModal" @keydown.esc="closeModal">
      <!-- 弹窗内容 -->
      <p>这是一个弹窗</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalOpen = false;
    },
    handleKeyPress(event) {
      if (event.keyCode === 27) {
        this.closeModal();
      }
    }
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyPress);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyPress);
  }
};
</script>

另外一个示例，我们将关闭弹窗和监听手机返回键关闭弹窗的代码抽离到了一个混入对象中，让所有的弹窗组件都继承这个混入对象：

const closeModalMixin = {
  methods: {
    closeModal() {
      this.isModalOpen = false;
    },
    handleKeyPress(event) {
      if (event.keyCode === 27) {
        this.closeModal();
      }
    }
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyPress);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyPress);
  }
};

export default {
  name: 'Modal',
  mixins: [closeModalMixin],
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
    }
  },
  template: `
    <div>
      <button @click="openModal">打开弹窗</button>
      <div v-show="isModalOpen" @click.self="closeModal">
        <!-- 弹窗内容 -->
        <p>这是一个弹窗</p>
      </div>
    </div>
  `
};