vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 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 动态增减,切换时提示用户是否切换的更多相关文章
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
随机推荐
- 790. Domino and Tromino Tiling
We have two types of tiles: a 2x1 domino shape, and an "L" tromino shape. These shapes may ...
- ng的点滴记录
1,directive http://damoqiongqiu.iteye.com/blog/1917971/ 2,constructor https://segmentfault.com/q/10 ...
- 基于Spark的FPGrowth算法的运用
一.FPGrowth算法理解 Spark.mllib 提供并行FP-growth算法,这个算法属于关联规则算法[关联规则:两不相交的非空集合A.B,如果A=>B,就说A=>B是一条关联规则 ...
- 【bug】安卓浏览器键盘输入改变弹出层的定位
bug描述 在安卓浏览器中,有一个在页面底部的弹出层表单,样式如下: .popup { position: absolute; bottom: 0; } 当在这个弹出层输入内容,键盘自动弹出,弹出层的 ...
- 【bzoj3489】 A simple rmq problem k-d树
由于某些原因,我先打了一个错误的树套树,后来打起了$k-d$.接着因不明原因在思路上被卡了很久,在今天中午蹲坑时恍然大悟...... 对于一个数字$a_i$,我们可以用一组三维坐标$(i,pre,nx ...
- POJ 2350
#include<iostream> #include<stdio.h> #include<iomanip> using namespace std; int ma ...
- h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘
html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...
- <context:component-scan>详解 转发 https://www.cnblogs.com/fightingcoding/p/component-scan.html
<context:component-scan>详解 默认情况下,<context:component-scan>查找使用构造型(stereotype)注解所标注的类,如@ ...
- PreparedStatement插入values
public interface PreparedStatementextends Statement 表示预编译的 SQL 语句的对象. SQL 语句被预编译并存储在 PreparedStateme ...
- PHP 批量获取 百度搜索结果 网址列表
<?php set_time_limit(0); function curl($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $u ...