antdv3没有v-decorator

Ant Design Vue 3.x 中没有 v-decorator 指令。该指令是在 Vue 2.x 版本中的 Element UI 中使用的。在 Ant Design Vue 3.x 中，可以使用 Vue 3.x 的新特性 setup() 函数和 Composition API 来实现表单校验。

例如，可以使用 ref() 函数来创建表单项的引用，并使用 computed() 函数来实现表单校验逻辑。

<template>
  <a-form ref="form" :model="formData" :rules="formRules">
    <a-form-item label="Username" :validateStatus="getFieldError('username') ? 'error' : ''" :help="getFieldError('username')">
      <a-input v-model="formData.username" />
    </a-form-item>
    <a-form-item label="Password" :validateStatus="getFieldError('password') ? 'error' : ''" :help="getFieldError('password')">
      <a-input type="password" v-model="formData.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleSubmit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';
import { Form, Input, Button, message } from 'ant-design-vue';

export default defineComponent({
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-input': Input,
    'a-button': Button,
  },
  setup() {
    const formRef = ref(null);

    const formData = ref({
      username: '',
      password: '',
    });

    const formRules = computed(() => ({
      username: [
        { required: true, message: 'Please input your username', trigger: 'blur' },
        { type: 'string', min: 2, max: 10, message: 'Length should be between 2 and 10', trigger: 'blur' },
      ],
      password: [
        { required: true, message: 'Please input your password', trigger: 'blur' },
        { type: 'string', min: 6, max: 20, message: 'Length should be between 6 and 20', trigger: 'blur' },
      ],
    }));

    const getFieldError = fieldName => {
      const field = formRef.value.getField(fieldName);
      if (field) {
        return field.errors[0].message;
      }
    };

    const handleSubmit = async () => {
      try {
        await formRef.value.validate();
        message.success('Validation passed');
      } catch (error) {
        message.error('Validation failed');
      }
    };

    return {
      formRef,
      formData,
      formRules,
      getFieldError,
      handleSubmit,
    };
  },
});
</script>