vue3引入ant-design-vue UI组件
- 安装
npm i --save ant-design-vue@next -S
- 在main.js全局引入
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(Antd).mount('#app');
- 使用组件：查看文档，例如：
<a-button type="primary">点击</a-button>
认识表单组件
- Form && FormModel 区别：FormModel支持v-model指令，推荐使用FormModel
- 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' },
],
};