el-tabs 切换之前进行拦截

tabs标签页在切换的时候进行提示，点击确定执行，点击取消不切换

element文档：before-leave切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。

这里有个坑就是直接return false 不生效，用 Promise 的reject的才能阻止

<template>
  <div style="width: calc(100% - 558px); text-align: left; flex: 1">
      <el-tabs
        type="card"
        v-model="current"
        :before-leave="changeHeader"
      >
        <el-tab-pane
          v-for="item in list"
          :label="item.title"
          :key="item.name"
          :name="item.path"
        ></el-tab-pane>
      </el-tabs>
    </div>
</template>
 
<script>
export default {
 
  data() {
    return {
    };
  },
  mounted() {
  },
 
  methods: {
    // 导航栏切换菜单
    changeHeaderMenu(tab) {
        var p = new Promise((resolve, reject) => {
          this.$confirm("您页面有修改，是否继续跳转?", {
            confirmButtonText: "确实",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              resolve();
              this.changeFun(tab);
            })
            .catch(() => {
              // throw new Error('取消成功！')
              return reject();
            });
        });
        return p;
    },
  },
};
</script>