Vue项目之ES6装饰器在项目实战中的应用

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {}

MyTestableClass.isTestable // true

function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function() {
    console.log(`Calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };
  return descriptor;
}

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

const math = new Math();

// Calling add with arguments
math.add(2, 4);

submitForm() {
  this.$refs['formName'].validate(async (valid) => {
    if (valid) {
      try {
        // 调用接口
        await this.handleTest();
        this.$message.success('Submit Successfully!')
      } catch(error) {
        console.log(error);
      }
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},

export function Validate(refName: string) {
  return function (target: any, name: string, descriptor: PropertyDescriptor) {
    const fn = target[name]; // 被装饰的方法
    descriptor.value = function (...args: any[]) {
      // 将触发校验的代码封装在此
      (this as any).$refs[refName].validate((valid: boolean) => {
        if (valid) {
          fn.call(this, ...args); // 在这里调用“被装饰的方法”
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    };
  };
}

import { Validate } from '@/utils/decorator'
export default class TestForm extends Vue {

  @Validate('formName')
  async submitForm() {
    try {
      // 调用接口
      await this.handleTest();
      this.$message.success('Submit Successfully!')
    } catch(error) {
      console.log(error);
    }
  }
}

export default class TestForm extends Vue {

  async submitForm() {
    try {
      await this.handleTest();
      this.$message.success('Submit Successfully!')
    } catch(error) {
      console.log(error);
    }
  }
}

export function CatchError() {
  return function (target: any, name: string, descriptor: PropertyDescriptor) {
    const fn = target[name];
    descriptor.value = async function (...args: any[]) {
      try {
        await fn.call(this, ...args);
      } catch (error) {
        console.log('error', error);
      }
    };
    return descriptor;
  };
}

import { CatchError } from '@/utils/decorator'
export default class TestForm extends Vue {
  @CatchError()
  async submitForm() {
    await this.handleTest();
    this.$message.success('Submit Successfully!')
  }
}

import { CatchError, Validate } from '@/utils/decorator'
export default class TestForm extends Vue {
  @CatchError()
  @Validate('ruleForm')
  async submitForm() {
    await this.handleTest();
    this.$message.success('Submit Successfully!')
  }
}

<template>
  <div>
    <el-button type="text" @click="handleDelete"
      >点击打开 Message Box 提示是否删除</el-button
    >
  </div>
</template>

<script>
import { Vue, Component } from "vue-property-decorator";
@Component
export default class DecoratorTest extends Vue {
  handleDelete() {
    this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      showCancelButton: true,
      beforeClose: (action, instance, done) => {
        if (action === "confirm") {
          instance.confirmButtonLoading = true;
          setTimeout(() => {
            done();
            setTimeout(() => {
              instance.confirmButtonLoading = false;
            }, 300);
          }, 2000);
        } else {
          done();
        }
      },
    }).then(() => {
      this.$message({
        type: "success",
        message: "删除成功!",
      });
    });
  }
}
</script>

import Vue from "vue";
interface ConfirmationConfig {
  title: string;
  message: string;
  // eslint-disable-next-line @typescript-eslint/ban-types
  options?: object;
  type?: string;
}
export function Confirmation(config: ConfirmationConfig) {
  return function (target: any, name: string, descriptor: PropertyDescriptor) {
    const fn = target[name];
    let _instance: any = null;
    descriptor.value = function (...args: any[]) {
      Vue.prototype
        .$confirm(
          config.message,
          config.title,
          Object.assign(
            {
              beforeClose: (action: string, instance: any, done: any) => {
                _instance = instance;
                if (action === "confirm") {
                  instance.confirmButtonLoading = true;
                  fn.call(this, instance, done, ...args);
                } else {
                  done();
                }
              },
            },
            config.options || {}
          )
        )
        .then(() => {
          _instance.confirmButtonLoading = false;
        });
    };
    return descriptor;
  };
}

<template>
  <div>
    <el-button type="text" @click="handleDelete"
      >点击打开 Message Box 提示是否删除</el-button
    >
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Confirmation } from "@/utils/decorator";
@Component
export default class DecoratorTest extends Vue {
  @Confirmation({
    title: "提示",
    message: "此操作将永久删除该文件, 是否继续?",
  })
  handleDelete(instance: any, done: any) {
    setTimeout(() => {
      done();
      setTimeout(() => {
        instance.confirmButtonLoading = false;
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      }, 300);
    }, 2000);
  }
}
</script>