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 笔记 代码比较多乱第3/3页

    下面是详细讲解“魔鬼字典 JavaScript 笔记 代码比较多乱第3/3页”的完整攻略。 1. 了解魔鬼字典的功能 魔鬼字典是一个基于 JavaScript 实现的词典工具,可以帮助用户查询单词的翻译、同义词、反义词和例句等信息。该工具的主要功能包括: 解析用户输入的单词,并根据单词的不同词性展示不同的内容。 可以查询单词的翻译、同义词、反义词和例句等信息…

    JavaScript 2023年5月19日
    00
  • 详解addEventListener的三个参数之useCapture

    addEventListener是DOM元素对象常用的事件绑定方法,其常用的用法如下: element.addEventListener(event, function [, options]); 其中,第三个参数options可以是一个布尔值,也可以是一个对象。当其是一个布尔值时,表示useCapture,即事件是否在捕获阶段(capturing phas…

    JavaScript 2023年6月11日
    00
  • JS实现直接运行html代码的方法

    JS 实现直接运行 html 代码的方法其实比较简单,一般步骤如下: 创建一个 iframe,将需要运行的 html 代码动态插入到 iframe 中; 通过 iframe contentWindow 属性获取 iframe 文档 window 对象; 将要执行的代码放在 window.onload 回调函数中,保证代码执行在页面元素都已经加载完毕后; 在 …

    JavaScript 2023年6月11日
    00
  • 一些常用的JavaScript函数(json)附详细说明

    下面是关于“一些常用的JavaScript函数(json)附详细说明”的整个攻略: 一些常用的JavaScript函数(json)附详细说明 1. JSON.parse() JSON.parse() 方法可以将符合 JSON 格式的字符串转换为对应的 JavaScript 对象或数组。该方法常用于在客户端接收后台返回的 JSON 格式数据并在前端进行解析和处…

    JavaScript 2023年6月11日
    00
  • JavaScript File API文件上传预览

    下面是关于“JavaScript File API文件上传预览”的完整攻略。 什么是JavaScript File API文件上传预览? JavaScript File API 文件上传预览是浏览器API之一,主要用于在浏览器中的上传文件操作中,可以通过JavaScript获取文件内容并展示到网页上,给用户更加直观的展示效果。 实现文件上传预览的步骤 1. …

    JavaScript 2023年5月27日
    00
  • javascript针对DOM的应用分析(五)

    “javascript针对DOM的应用分析(五)”是一篇关于Javascript框架的技术分析文章,主要讲解了如何使用Javascript操作DOM(Document Object Model)。以下是完整攻略。 一、DOM是什么 DOM是文档对象模型(Document Object Model)的缩写,用于描述HTML和XML文档的程序接口。通过 DOM,…

    JavaScript 2023年6月10日
    00
  • getElementByIdx_x js自定义getElementById函数

    自定义getElementById函数是指我们自己编写一个函数来实现与原生document.getElementById相同的功能,该功能就是获取HTML文档中指定id属性的元素节点。 以下是一个示例的自定义getElementById函数: function getElementByIdx_x(id) { var docEl = document.docu…

    JavaScript 2023年6月10日
    00
  • js中如何对url进行编码和解码

    在 JavaScript 中,有两种方式可以对 URL 进行编码和解码,分别是 encodeURI() 和 encodeURIComponent()。 encodeURI() encodeURI() 方法用于将 URI (Uniform Resource Identifier) 进行编码,但是不会对一些特殊字符 (;,/?:@&=+$#) 进行编码。…

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