无法实现关闭tab时出现二次确认

[pandly]

使用onClose阻止关闭，但是无法捕捉到点击关闭按钮事件，导致无法实现二次确认

[pandly]

如果在onClose里面写二次确认逻辑，则会导致死循环

[viewweiwu]

好的，等我实验一下，有结果了通知你

[viewweiwu]

二次确认可以的。 清尝试这样使用 https://codesandbox.io/s/romantic-elion-krmou?file=/src/App.vue

<template>
  <vue-tabs-chrome v-model="tab" :tabs="tabs" :on-close="handleClose" />
</template>
<script>
export default {
  data() {
    return {
      tab: "google",
      tabs: [
        {
          label: "google",
          key: "google",
        },
        {
          label: "facebook",
          key: "facebook",
        },
      ],
    };
  },
  methods: {
    handleClose(tab, key, index) {
      let confirm = window.confirm("确定要关闭吗？");
      return confirm;
    },
  },
};
</script>

[pandly]

在handleClose中写this.$refs.tab.removeTab(key)会陷入死循环：

handleClose (module, key, index) {
      this.$confirm('确定要删除该信息集吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$refs.tab.removeTab(key)
        return true
      }).catch(e => {
        return false
      })
    }

[viewweiwu]

看样子，你那边使用了 element-ui 的 confirm 框。 也许你可以这样。 https://codesandbox.io/s/romantic-elion-krmou?file=/src/App.vue

<template>
  <vue-tabs-chrome
    ref="tabs"
    v-model="tab"
    :tabs="tabs"
    :on-close="handleClose"
  />
</template>
<script>
export default {
  data() {
    return {
      tab: "google",
      confirm: false,
      tabs: [
        {
          label: "google",
          key: "google",
        },
        {
          label: "facebook",
          key: "facebook",
        },
      ],
    };
  },
  methods: {
    handleClose(tab, key, index) {
      if (this.confirm) {
        return true;
      }
      this.confirm = true;
      this.$confirm("确认关闭吗")
        .then(() => {
          this.$refs.tabs.removeTab(key);
          this.confirm = false;
        })
        .catch(() => {
          this.confirm = false;
        });
      return false;
    },
  },
};
</script>

[pandly]

可以了，但还是建议职责单一化，onClose只负责关闭tab标签的钩子，可以另外再增加一个点击关闭事件 具体可以参考element-ui的el-tabs的做法