前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现。转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9523735.html

网站地址:我的个人vue+element ui demo网站

github地址:yuleGH github

代码如下: 

<html>

<head>
<title>测试</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">
</head>
<body>
<div id="app">
<p style="color: red;">自定义增加标签页触发器,切换标签页时提示是否切换</p> <div style="margin-bottom: 20px;">
<el-button size="small" @click="addTab(editableTabsValue)">
add tab
</el-button>
</div>
<el-tabs v-model="editableTabsValue" type="card" closable
@tab-remove="removeTab"
:before-leave="beforeLeaveTab">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.id"
:label="'Tab' + (index + 1)"
:name="item.id">
{{item.content}}
</el-tab-pane>
</el-tabs> </div>
<!-- 引入组件库 -->
<script type="text/javascript" src="../lib/vue.js"></script>
<script type="text/javascript" src="../lib/elementui/index.js"></script> <script type="text/javascript">
new Vue({
el: "#app",
data: {
editableTabsValue : '1',
editableTabs: [{
id: '1',
content: 'Tab 1 content'
}, {
id: '2',
content: 'Tab 2 content'
}],
tabIndex : 2, isTip : true
},
methods: {
addTab(targetId) {
let newTabId = ++this.tabIndex + '';
this.editableTabs.push({
id: newTabId,
content: 'New Tab content'
});
this.isTip = false;
this.editableTabsValue = newTabId;
},
removeTab(targetId) {
let tabs = this.editableTabs;
let activeId = this.editableTabsValue;
if (activeId === targetId) {
tabs.forEach((tab, index) => {
if (tab.id === targetId) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeId = nextTab.id;
}
this.isTip = false;
this.editableTabsValue = activeId;
}
});
} this.editableTabs = tabs.filter(tab => tab.id !== targetId);
}, beforeLeaveTab(){
if(!this.isTip){
this.isTip = true;
return true;
} return this.$confirm('此操作将切换tab页, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '切换成功!可以做一些其他的事情'
});
}).catch(() => {
this.$message({
type: 'success',
message: '取消成功!可以做一些其他的事情'
});
throw new Error("取消成功!");
});
} }
});
</script> </body> </html>

完。

  

发现一个bug

  在使用 el-tabs 的属性 before-leave 时可以返回 Promise 来控制是否切换,如下:

  于是,我直接返回了 $confirm 方法返回的 Promise,

        return this.$confirm('此操作将切换tab页, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '切换成功!可以做一些其他的事情'
});
});

  可是当点击弹出框取消时页面报错如下:

  点击上方查看源码,发现源码如下:

  所以,发现 vue minui 封装的 promise 定义了 reject,而这里没有加取消处理,而且我们的 this.$confirm 也没有加取消方法,所以自己加上取消方法传过去就好了。

  但是只是在 this.$confirm 加取消方法,仅仅能做到不报错而已,并不能做到用户点击取消时阻止切换。

解决方案

  element ui 源码中加上如下代码 ,function(){}:

  并在使用时这样使用:

          beforeLeaveTab(){
return this.$confirm('此操作将切换tab页, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '切换成功!可以做一些其他的事情'
});
}).catch(() => {
this.$message({
type: 'success',
message: '取消成功!可以做一些其他的事情'
});
throw new Error("取消成功!");
});
}

转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9523735.html

vue+element ui 的tab 动态增减,切换时提示用户是否切换的更多相关文章

  1. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  2. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  3. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  4. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  5. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  6. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  7. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  8. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

随机推荐

  1. 201621123023《Java程序设计》第5周学习总结

    一.本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 接口.interface.comparable.comparator 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一 ...

  2. Android NDK开发Crash错误定位

    在Android开发中,程序Crash分三种情况:未捕获的异常.ANR(Application Not Responding)和闪退(NDK引发错误).其中未捕获的异常根据logcat打印的堆栈信息很 ...

  3. jquery ajax在跨域访问post请求的时候,包括ie9以下的浏览器无效,其他浏览器正常

    最近做的一个项目,原先没有要求兼容IE9以下,所以在写代码的时候也没有打开IE9以下去测试,这两天要去做IE9以下的兼容,在IE9以下打开本地的项目发现数据请求不成功,而通过发布道服务器上的链接打开是 ...

  4. UML入门 之 交互图 -- 时序图 协作图详解

    作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/17927131 动态图概念 : 从静态图中抽取瞬间值的变化描 ...

  5. Hive执行过程

    http://blog.csdn.net/wf1982/article/details/9122543

  6. 简述ARP请求过程(同一子网和不同子网)

    1. 同一子网 主机A在准备构造链路层以太网帧头时,首先根据目的IP去查找ARP表,如果找到对应项,则直接得到目的MAC地址,如果没有查到才执行上面所说的ARP广播请求.这样做是为了最大限度地减少广播 ...

  7. android开发分辨率适配总结

    重要概念 什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 什么是dp.dip.dpi.sp.px?他们之间的关系是什么? 什么是mdpi.hdpi.xdpi.xxdpi?如何计算和区分? 在下面的内容中我 ...

  8. tensorflow基础篇-1

    1.使用占位符和变量 import tensorflow as tf import numpy as np #-----创建变量并初始化----------- def first(): my_var= ...

  9. Android 开发工具类 06_NetUtils

    跟网络相关的工具类: 1.判断网络是否连接: 2.判断是否是 wifi 连接: 3.打开网络设置界面: import android.app.Activity; import android.cont ...

  10. Java性能调优:利用JMC进行性能分析

    JMC, 即Java任务控制(Java Mission Control)是从Java7(7u40)和 Java8 的商业版本包括一项新的监控和控制特性. JMC 程序 (JDK_HOME\bin目录下 ...