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文件,用于存储全局状态和相关的mutationaction方法。

// 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)返回上一级路由。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue 手机物理监听键+退出提示代码 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • javascript 调用其他页面的js函数或变量的脚本

    要在JavaScript中调用其他页面的函数或变量,有以下两种方法: 1. 使用window.opener对象 当在一个页面中用window.open打开另一个页面时,这个被打开的页面就可以使用window.opener来访问打开它的页面。所以,我们可以利用这个特性来调用父页面的函数或变量。 父页面示例代码: <!DOCTYPE html> &l…

    JavaScript 2023年6月11日
    00
  • php json中文编码为null的解决办法

    下面是详细的讲解: 问题描述 在PHP中,对于中文编码的JSON数据,在进行json_encode()时可能会出现某些中文字符串被编码为null的情况,这会导致JSON数据无法正常解析。如何解决这个问题呢? 解决办法 指定json_encode()函数的选项参数 我们可以在json_encode()函数的第二个参数中设置选项参数,如下所示: $data = …

    JavaScript 2023年6月1日
    00
  • jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明

    jQuery Tab插件 用于在Tab中显示iframe 简介 jQuery Tab插件是一个轻量级的jQuery插件,用于创建带有选项卡切换效果的网页界面,支持通过iframe方式展示内容,非常适合制作具有多种功能的网站。该插件使用方便、易于应用,在开发实际项目中广泛应用。该插件的源码可以在Github上获得。 安装步骤 1.引入依赖文件 在HTML中需要…

    JavaScript 2023年6月11日
    00
  • Javascript Math LOG2E 属性

    JavaScript中的Math.LOG2E属性是一个常数,表示以2为底的自然对数e的对数。以下是关于Math.LOG2E属性的完整攻略,包括两个示例。 Math对象的LOG2属性 JavaScript Math对象中的LOG2E属性是一个常数,表示以2为底的自然数e的对数。 下面是LOG2E属性语法: Math.LOG2E 下面是一个LOG2E属性的示例:…

    JavaScript 2023年5月11日
    00
  • 2020年12道高频JavaScript手写面试题及答案

    下面我来详细讲解一下“2020年12道高频JavaScript手写面试题及答案”的完整攻略。 一、背景介绍 该文章主要介绍了2020年12道高频JavaScript手写面试题及答案,这些面试题具有一定难度,涵盖了JavaScript的各种基本知识点,例如执行上下文、this指针、原型链等。 二、攻略流程 该文章可以按照以下流程来进行攻略: 先了解每个面试题的…

    JavaScript 2023年6月10日
    00
  • JS重要知识点小结

    JS重要知识点小结 1. 变量与数据类型 1.1 变量声明与赋值 在JS中,我们声明一个变量需要使用var关键字,赋值则使用=号,如下所示: var num = 5; //声明并赋值一个数值型变量 var str = ‘hello’; //声明并赋值一个字符串型变量 var arr = [1,2,3]; //声明并赋值一个数组型变量 1.2 数据类型 在JS…

    JavaScript 2023年6月10日
    00
  • js数组去重的常用方法总结

    好,下面是关于“js数组去重的常用方法总结”的完整攻略。 js数组去重的常用方法总结 一、利用Set去重 ES6新增了Set容器,可以创建一个不重复的集合。因此,利用Set可以快速去重,代码如下: const arr = [1, 2, 3, 3, 4, 5, 4]; const result = Array.from(new Set(arr)); // [1…

    JavaScript 2023年5月27日
    00
  • JavaScript函数执行、作用域链以及内存管理详解

    JavaScript函数执行、作用域链以及内存管理详解 在JavaScript中,函数是一等公民,其执行依赖于作用域链和内存管理机制。理解这些概念对于编写高质量的JavaScript代码至关重要。本文将详细介绍JavaScript函数执行、作用域链以及内存管理的相关知识。 函数执行 JavaScript中的函数执行过程分为创建阶段和执行阶段两个阶段。 创建阶…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部