vue+element ui 的tab 動態增減，切換時提示用戶是否切換

時間 2019-12-06

標籤 vue+element vue element tab 動態增減切換提示用戶是否简体版

原文原文鏈接

前言：工做中用到 vue+element ui 的前端框架，動態添加 Tab，刪除 Tab，切換 Tab 時提示用戶是否切換等，發現 element ui 有一個 bug，這裏記錄一下如何實現。轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9523735.htmljavascript

網站地址：個人我的vue+element ui demo網站 css

github地址：yuleGH githubhtml

代碼以下： 前端

<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>

完。vue

發現一個bug

　　在使用 el-tabs 的屬性 before-leave 時能夠返回 Promise 來控制是否切換，以下：java

　　因而，我直接返回了 $confirm 方法返回的 Promise，git

        return this.$confirm('此操做將切換tab頁, 是否繼續?', '提示', {
              confirmButtonText: '肯定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '切換成功！能夠作一些其餘的事情'
              });
            });

　　但是當點擊彈出框取消時頁面報錯以下：github

　　點擊上方查看源碼，發現源碼以下：promise

　　因此，發現 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

1. tab切換效果，滑動tab 點擊切換tab標籤
2. Vue切換Tab動態渲染組件
3. tab欄切換
4. jQuery-tab切換
5. vue tab切換
6. tab切換
7. demo-tab切換
8. iframe，tab切換
9. tab切換js
10. Flutter切換tab後保留tab狀態
更多相關文章...
• ionic Toggle(切換開關) - ionic 教程
• ionic Toggle(切換開關) - ionic 教程
• SpringBoot中properties文件不能自動提示解決方法
• IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。