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

相关阅读:
javascript里面&&和||
Who am I?
Mis开发过程中的不同角色（忽略外包的情况下）
重蹈覆辙？
适时使用Photo Courtesy
【LeetCode练习题】Reverse Linked List II
【C++】大数的+-*/四则运算
 【LeetCode练习题】Multiply Strings
【LeetCode练习题】Evaluate Reverse Polish Notation
【LeetCode练习题】Merge k Sorted Lists
原文地址：https://www.cnblogs.com/yuxiaole/p/9523735.html