【UI框架】Ant Design Vue

vue3引入ant-design-vue UI组件

1. 安装

npm i --save ant-design-vue@next -S

2. 在main.js全局引入

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(Antd).mount('#app');

3. 使用组件：查看文档，例如：

<a-button type="primary">点击</a-button>

认识表单组件

1. Form && FormModel 区别：FormModel支持v-model指令，推荐使用FormModel
2. Form 组件提供了表单验证的功能，通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名

<a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item ref="name" label="Activity name" prop="name">
      <a-input
        v-model="form.name"
        @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        "
      />
    </a-form-model-item>
</a-form-model>

model : 表单数据对象
rules : 定义校验规则

rules: {
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
};