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

vue+element ui 的tab 动态增减,切换时提示用户是否切换

代码如下: 

<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 来控制是否切换,如下:

vue+element ui 的tab 动态增减,切换时提示用户是否切换

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

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

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

vue+element ui 的tab 动态增减,切换时提示用户是否切换

  点击上方vue+element ui 的tab 动态增减,切换时提示用户是否切换查看源码,发现源码如下:

vue+element ui 的tab 动态增减,切换时提示用户是否切换

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

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

解决方案

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

vue+element ui 的tab 动态增减,切换时提示用户是否切换

  并在使用时这样使用:

          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

上一篇:【Python】 用户图形界面GUI wxpython II 布局和事件


下一篇:分享一个自搭的框架,使用Spring boot+Vue+Element UI