el-tabs 切换之前进行拦截

news2024/11/6 3:12:26

tabs标签页在切换的时候进行提示,点击确定执行,点击取消不切换

element文档:before-leave切换标签之前的钩子,若返回 false 或者返回 Promise 且被 reject,则阻止切换。

这里有个坑就是直接return false 不生效,用 Promise 的reject的才能阻止

<template>
  <div style="width: calc(100% - 558px); text-align: left; flex: 1">
      <el-tabs
        type="card"
        v-model="current"
        :before-leave="changeHeader"
      >
        <el-tab-pane
          v-for="item in list"
          :label="item.title"
          :key="item.name"
          :name="item.path"
        ></el-tab-pane>
      </el-tabs>
    </div>
</template>
 
<script>
export default {
 
  data() {
    return {
    };
  },
  mounted() {
  },
 
  methods: {
    // 导航栏切换菜单
    changeHeaderMenu(tab) {
        var p = new Promise((resolve, reject) => {
          this.$confirm("您页面有修改,是否继续跳转?", {
            confirmButtonText: "确实",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              resolve();
              this.changeFun(tab);
            })
            .catch(() => {
              // throw new Error('取消成功!')
              return reject();
            });
        });
        return p;
    },
  },
};
</script>
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1395459.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网易云音乐 API

网易云音乐 API 网易云音乐 API灵感来自环境要求安装运行Vercel 部署操作方法 可以在Node.js调用支持 TypeScript使用文档功能特性更新日志单元测试SDK贡献者License 网易云音乐 API 网易云音乐 Node.js API service 灵感来自 disoul/electron-cloud-music darknessomi/musi…

Leetcode2182. 构造限制重复的字符串

Every day a Leetcode 题目来源&#xff1a;2182. 构造限制重复的字符串 解法1&#xff1a;贪心 双指针 我们先用一个长度为 26 的数组 cnt 统计字符串 s 中每个字符出现的次数&#xff0c;然后从大到小枚举字母表的第 i 个字母&#xff0c;每次取出最多 min⁡(cnt[i], re…

微信小程序(七)navigator点击效果

注释很详细&#xff0c;直接上代码 新增内容&#xff1a; 1.默认效果 2.无效果 3.激活效果 源码&#xff1a; index.wxml //如果 <navigator url"/pages/logs/logs">跳转到log页面&#xff08;默认&#xff09; </navigator><navigator url"/pa…

Spring WebSocket实现实时通信的详细教程

简介 WebSocket 是基于TCP/IP协议&#xff0c;独立于HTTP协议的通信协议。WebSocket 连接允许客户端和服务器之间的全双工通信&#xff0c;以便任何一方都可以通过已建立的连接将数据推送到另一方。 我们常用的HTTP是客户端通过「请求-响应」的方式与服务器建立通信的&#x…

Jmeter的文件参数化:CSV数据文件设置和_CSVRead函数

一、CSV数据文件设置 1、简介 CSV数据文件配置&#xff08;CSV Data Set Config&#xff09;可以将CSV文件中数据读入自定义变量中 Jmeter中CSV数据文件配置的界面如下图所示&#xff1a; 其中&#xff1a; &#xff08;1&#xff09;文件编码 文件的编码格式&#xff0c;与所…

Java网络编程——UDP通信原理

一、TCP和UDP概述 传输层通常以TCP和UDP协议来控制端点与端点的通信 TCPUDP协议名称传输控制协议用户数据包协议是否连接面向连接的协议。数据必须要建立连接无连接的协议&#xff0c;每个数据报中都给出完整的地址信息&#xff0c;因此不需要事先建立发送方和接受方的连接是…

200SMART作为智能控制器和智能设备使用

200SMART固件版本在V2.5以上的标准型CPU都支持PROFINET IO控制器和IO设备使用。 S7-200SMART作为智能设备仅支持1个IO控制器&#xff0c;可配置的输入输出存储区都为128个字节&#xff0c;地址范围分别为I(Q)1152.0到I(Q)1279.7;每个CPU支持最多8个PROFINET IO设备&#xff0c…

CentOS 6.10 安装图解

特特特别的说明 CentOS发行版已经不再适合应用于生产环境&#xff0c;客观条件不得不用的话&#xff0c;优选7.9版本&#xff0c;8.5版本次之&#xff0c;最次6.10版本&#xff08;比如说Oracle 11GR2就建议在6版本上部署&#xff09;&#xff01; 引导和开始安装 选择倒计时结…

【Python】如何快速知道当前python所用库的路径

【背景】 项目一多&#xff0c;python环境就开始互相影响。有时需要快速知道当前的环境用的库&#xff0c;也就是site-pachage是哪个路径下的。 【方法】 打开相应的Python.exe&#xff0c;进入python命令行&#xff0c;输入&#xff1a; import sys print(sys.path)结果类…

canal server初始化源码分析

CanalLauncher类是canal server端启动的入口类&#xff0c;跟随代码进行深入。 在开始之前&#xff0c;我们可以先了解下&#xff0c; canal 配置方式 ManagerCanalInstanceGenerator&#xff1a; 基于manager管理的配置方式&#xff0c;实时感知配置并进行server重启Spring…

Java-初识正则表达式 以及 练习

目录 什么是正则表达式&#xff1f; 1. 正则表达式---字符类&#xff08;一个大括号匹配一个字符&#xff09;&#xff1a; 2. 正则表达式---预字符类&#xff08;也是匹配一个字符&#xff09;&#xff1a; 正则表达式---数量词 &#xff08;可以匹配多个字符&#xff09;…

android studio 连接 夜神模拟器方法

android studio 连接 夜神模拟器方法 1、打开cmd 2、输入夜神模拟器的安装地址&#xff0c;至bin目录下 3、输入连接指令&#xff1a;nox_adb.exe connect 127.0.0.1:62001 4、连接成功会提示successfully 5、打开Android Studio&#xff0c;会就会出现连接的模拟器。

C#,入门教程(07)——软件项目的源文件与目录结构

上一篇&#xff1a; C#&#xff0c;入门教程(06)——解决方案资源管理器&#xff0c;代码文件与文件夹的管理工具https://blog.csdn.net/beijinghorn/article/details/124895033 创建新的 C# 项目后&#xff0c; Visual Studio 会自动创建一系列的目录与文件。 程序员后面的工…

Opencv小项目——手势数字刷TIKTOK

​ 写在前面&#xff1a; 很久没更新了&#xff0c;之前的实习的记录也算是烂尾了&#xff0c;但是好在自己的实习记录还是有的&#xff0c;最近也忙碌了很多&#xff0c;终于放假了&#xff0c;今天下午正好没事&#xff0c;闲来无事就随便做个小玩意吧。 思来想去&#xff…

python算法与数据结构(搜索算法和拓扑排序算法)---深度优先搜索

课程目标 了解树/图的深度遍历&#xff0c;宽度遍历基本原理&#xff1b;会使用python语言编写深度遍历&#xff0c;广度遍历代码&#xff1b;掌握拓扑排序算法 搜索算法的意义和作用 搜索引擎 提到搜索两个子&#xff0c;大家都应该会想到搜索引擎&#xff0c;搜索引擎的基…

android 和 opencv 开发环境搭建

本文详细说明给android项目添加opencv库的详细步骤&#xff0c;并通过实现图片灰度化来查看配置是否成功。 下载OPENCV ANDROID SDK 到官网下载 打开 https://opencv.org/releases/ 选择android&#xff0c;下载完成后解压出下面的文件&#xff1a; 安装android sdk 和 ndk …

Tide Quencher 7.2 CPG 500A ,TQ7.2 CPG 500A,可以提高荧光标记物的淬灭效果

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;荧光淬灭剂Tide Quencher 7.2 CPG 500A&#xff0c;Tide Quencher 7.2 CPG 500A &#xff0c;TQ7.2 CPG 500A 一、基本信息 产品简介&#xff1a;The fluorescence quencher Tide Quencher 7.2 CPG 500A can quench…

Android Dialog setCanceledOnTouchOutside失效,点击dialog外面不消失

前言&#xff1a;有一个需求需要点击dialog外面要消失&#xff0c;本来以为很简单结果设置了一直未生效 setCanceledOnTouchOutside(true); 问了半天chat-gpt4结果给的答案都不明显 查看代码发现设置了style&#xff0c;于是尝试去除这个style&#xff0c;结果点击setCancele…

用Go plan9汇编实现斐波那契数列计算

斐波那契数列是一个满足递推关系的数列&#xff0c;如&#xff1a;1 1 2 3 5 8 ... 其前两项为1&#xff0c;第3项开始&#xff0c;每一项都是其前两项之和。 用Go实现一个简单的斐波那契计算逻辑 func fib(n int) int {if n 1 || n 2 {return 1}return fib(n-1) fib(n-2) …

【leetcode】消失的数字

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家刷题&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 1.暴力求解法2.采用异或的方法&#xff08;同单身狗问题&#xff09;3.先求和再减去数组元素 点击查看…