vue+element ui 的tab 動態增減，切換時提示用戶是否切換
阿新 • • 發佈：2018-08-24
ble href test 點擊 rom item lock code vue.js
前言：工作中用到 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 動態增減，切換時提示用戶是否切換