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

最新推荐文章于 2024-08-09 19:05:37 发布

DIY_lOVER

最新推荐文章于 2024-08-09 19:05:37 发布

阅读量416

点赞数

文章标签： javascript vue.js typescript

本文链接：https://blog.csdn.net/DIY_lOVER/article/details/130225247

版权

文章介绍了如何在Vue中利用装饰器(@decorator)来实现方法执行前的确认操作。通过一个名为`confirmDecorator`的装饰器函数，可以在调用特定方法（如`handleDel`）前显示一个来自ElementUI的MessageBox确认框，询问用户是否确定执行某操作，如删除。装饰器允许传入`propName`和自定义`message`参数，以提供更灵活的对话框内容。

摘要由CSDN通过智能技术生成

在 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 拼接后的消息。