vue 手机物理监听键+退出提示代码-前端开发

下面我就为大家详细讲解如何实现“vue 手机物理监听键+退出提示代码”。

下面我就为大家详细讲解如何实现“vue 手机物理监听键+退出提示代码”。

步骤一：安装依赖和引入插件

首先，我们需要先安装依赖和引入插件。安装依赖可以使用npm或yarn进行安装，本教程使用yarn作为示例（前提是你已经通过npm安装了yarn）

yarn add vue-router@latest
yarn add -D @vue/cli-plugin-babel

然后，我们需要引用@vue/cli-plugin-babel插件，以支持ES6语法的编写。

// main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

// 安装依赖
// ...

Vue.config.productionTip = false;

// 引入插件
Vue.use(require('@vue/cli-plugin-babel'));

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

步骤二：在页面中添加代码

其次，在页面中添加代码。我们需要监听手机物理返回键，当用户在页面内按下返回键时，触发退出提示弹窗。

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.listenUserBack();
  },
  methods: {
    listenUserBack() {
      window.history.pushState(null, null, window.location.href);
      window.addEventListener('popstate', this.nativeBackListener);
    },
    nativeBackListener() {
      this.$swal({
        title: '提示',
        text: '是否退出当前页面？',
        icon: 'warning',
        buttons: true,
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          window.removeEventListener('popstate', this.nativeBackListener);
          this.$router.go(-1);
        }
      });
      window.history.pushState(null, null, window.location.href);
    },
  },
};
</script>

以上代码中，我们监听了window全局对象中的popstate事件，并调用$swal()弹窗函数。如果用户点击弹窗中的确认按钮，则让用户返回上一级路由。

值得注意的是，我们在listenUserBack()方法中调用了window.history.pushState(null, null, window.location.href);方法，它实际上是为了让虚拟路由的状态发生变化，让手机物理返回键生效。

示例一：在vuex中添加全局退出按钮

如果你期望在每个页面中都添加全局退出按钮，那么你可以考虑在vuex中添加一个全局的isShowQuit状态，用于控制“退出提示框”的显示与隐藏。

第一步：安装依赖

首先，我们需要安装vuex依赖

yarn add vuex

第二步：创建并配置store

然后，我们需要创建一个store文件，用于存储全局状态和相关的mutation和action方法。

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    isShowQuit: false, // 是否显示退出提示框
  },
  mutations: {
    setShowQuitStatus(state, status) {
      state.isShowQuit = status;
    },
  },
  actions: {
    showQuitDialog(context) {
      context.commit('setShowQuitStatus', true);
    },
    hideQuitDialog(context) {
      context.commit('setShowQuitStatus', false);
    },
  },
});

export default store;

第三步：在app.vue文件中引入全局退出按钮

<!-- App.vue -->

<template>
  <div>
    <!-- 省略代码 -->
    <router-view />
    <!-- 添加全局退出按钮 -->
    <button v-if="isShowQuit" @click="confirmQuit">退出</button>
  </div>
</template>

<script>
export default {
  computed: {
    isShowQuit() {
      return this.$store.state.isShowQuit;
    },
  },
  methods: {
    confirmQuit() {
      this.$store.dispatch('hideQuitDialog');
      this.$router.back();
    },
  },
};
</script>

第四步：在需要调用退出提示框的页面调用showQuitDialog方法

在需要调用退出提示框的页面中，我们需要调用showQuitDialog方法

// About.vue

export default {
  methods: {
    exit() {
      this.$store.dispatch('showQuitDialog');
    },
  },
}

示例二：在页面中直接添加退出按钮

如果你仅需要在某个组件内部添加退出按钮，我们也可以直接在该组件中添加退出按钮，无需使用vuex。

<template>
  <div>
    <h1>Hello World</h1>
    <button @click="showQuitDialog">退出</button>
  </div>
</template>

<script>
export default {
  methods: {
    showQuitDialog() {
      this.$swal({
        title: '提示',
        text: '是否退出当前页面？',
        icon: 'warning',
        buttons: true,
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          this.$router.go(-1);
        }
      });
    },
  },
};
</script>

以上代码中，我们在template标签中添加了一个显示文字为“退出”的按钮，在按钮上绑定@click事件，用于调用showQuitDialog()方法弹出退出提示框。如果用户点击确认按钮，则调用this.$router.go(-1)返回上一级路由。