vue中的二次确认用装饰器封装

 在 Vue 中编写装饰器可以通过使用 @decorator 的方式，以简洁的方式实现对某个方法的扩展或者功能增强。

下面是一个示例装饰器实现，在调用某个方法之前弹出确认框：

import { MessageBox } from 'element-ui';

export function confirmDecorator(propName: string) {
  return function(target: any, key: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = async function(row: any) {
      const confirmResult = await MessageBox.confirm(`确定删除${row[propName]}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });

      if (confirmResult === 'confirm') {
        return originalMethod.apply(this, [row]);
      }
    };

    return descriptor;
  };
}

在这个实现中，我们将 message 参数添加到了装饰器函数的参数列表中，并在确认对话框消息的拼接中使用了该参数。在使用装饰器时，可以同时指定 message 和 propName 两个参数，例如：

import { Component, Vue } from 'vue-property-decorator';
import { confirmDecorator } from './confirmDecorator';

@Component
export default class MyComponent extends Vue {
  @confirmDecorator('确定要删除', 'name')
  async handleDel(row: any) {
    // ...
  }
}

在这个示例中，message 参数的值为 '确定要删除'，propName 参数的值为 'name'。在确认对话框中，将显示 '确定要删除' 和 row.name 拼接后的消息。