Vue.js 2模态框问题：方法执行后关闭弹窗及错误提示

嘿，我来帮你搞定这个问题！你现在的情况是点击"Yes"按钮时，绑定的方法确实执行了，但模态框没自动关闭，也没法处理执行出错的情况。下面咱们一步步修改代码来实现需求：

1. 先改造Dialog组件，加上错误处理和结果判断逻辑 #

首先得给Dialog组件加个错误提示的区域，然后修改确认按钮的点击逻辑，让它能处理方法的执行结果：

const Dialog = Vue.extend({
  template: `
    <div v-if="show" class="modal">
      <div class="modal-body">
        <div class="modal-header"><h3>Aktion bestätigen</h3></div>
        <div class="modal-content">
          <div class="uk-flex">
            <div class="uk-margin-small-right">
              <span uk-icon="icon: question; ratio: 3"></span>
            </div>
            <div> Are You sure? </div>
          </div>
          <!-- 新增错误提示区域，出错时显示 -->
          <div v-if="errorMsg" class="uk-alert uk-alert-danger uk-margin-small-top">
            {{ errorMsg }}
          </div>
          <hr>
          <div class="uk-flex uk-flex-right">
            <button class="uk-button uk-button-danger uk-margin-small-right" @click="handleConfirm">Yes</button>
            <button class="uk-button uk-button-default" @click="show = false">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  `,
  data() {
    return {
      show: false,
      errorMsg: ''
    }
  },
  props: {
    // 把要执行的方法作为props传入，更符合Vue组件规范
    confirmAction: {
      type: Function,
      required: true
    }
  },
  methods: {
    async handleConfirm() {
      try {
        // 等待绑定的方法执行完成
        await this.confirmAction();
        // 执行成功就关掉模态框，同时清空错误信息
        this.show = false;
        this.errorMsg = '';
      } catch (err) {
        // 执行出错的话，把错误信息显示出来，模态框保持打开
        this.errorMsg = err.message || '操作失败啦，请重试';
      }
    }
  }
});

这里主要改了这几点：

• 新增了errorMsg来存错误信息，模板里加了对应的红色提示框
• 把原来直接传的confirmed改成了propsconfirmAction，组件逻辑更清晰
• 把确认按钮的点击方法改成异步的，用try/catch捕获执行结果，成功就关弹窗，失败就显示错误

2. 调整指令的绑定逻辑 #

接下来改指令部分，把绑定的方法通过props传给Dialog组件，而不是塞到data里：

Vue.directive('confirm', {
  bind(el, binding, vnode) {
    const confirmMethod = binding.value;
    
    el.handleClick = (e) => {
      // 创建Dialog实例，用propsData传要执行的方法
      const dialog = new Dialog({
        propsData: {
          confirmAction: confirmMethod
        }
      }).$mount();
      
      // 手动把show设为true，让弹窗显示出来
      dialog.show = true;
      
      document.body.appendChild(dialog.$el);
    };
    
    el.addEventListener('click', el.handleClick);
  },
  unbind(el) {
    el.removeEventListener('click', el.handleClick);
  }
});

这里的小改动：

• 用propsData传递方法，比之前的data更符合Vue的组件设计思路
• 实例化后手动打开弹窗，逻辑更直观

3. 确保你绑定的方法返回Promise #

最后，你在模板里绑定的方法（比如那个delete方法）得返回一个Promise，这样组件里的await才能正确处理成功或失败的情况：

// 举个例子，你的组件里的delete方法可以这么写
methods: {
  deleteItem() {
    // 用Promise包装异步操作，比如调用后端接口
    return new Promise((resolve, reject) => {
      // 模拟API请求
      setTimeout(() => {
        const operationSuccess = true; // 这里换成你实际的成功判断逻辑
        if (operationSuccess) {
          resolve('删除成功！');
        } else {
          reject(new Error('删除失败，找不到对应的资源'));
        }
      }, 1000);
    });
  }
}

如果你的方法是用axios这类库发请求的，它们本身就会返回Promise，直接返回就行，不用额外包装。

这样改完之后，点击"Yes"按钮时：

• 如果绑定的方法执行成功，模态框会自动关闭
• 如果执行出错，模态框里会显示错误提示，不会关闭，用户可以选择再试一次或者点Cancel关掉

内容的提问来源于stack exchange，提问作者DaFunkyAlex