ui-form-item 表单项组

版本：v2.3.11

表单项组件用于包裹表单控件，提供标签、验证信息和错误提示等功能

基本使用

<template>
  <div class="form-item-demo">
    <ui-form ref="formRef" :model="formData" :rules="rules">
      <ui-form-item prop="username" label="用户>
        <ui-form-input v-model="formData.username" placeholder="请输入用户名" />
      </ui-form-item>
      <ui-form-item prop="password" label="密码">
        <ui-form-input v-model="formData.password" type="password" placeholder="请输入密 />
      </ui-form-item>
    </ui-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const formRef = ref(null);
const formData = ref({
  username: '',
  password: ''
});
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密, trigger: 'blur' },
            { min: 6, message: '密码长度不能少于6个字, trigger: 'blur' }]
};
</script>

<style scoped>
.form-item-demo {
  padding: 20px;
}
</style>

Props

参数	类型	默认值	说明
prop	String	-	表单字段名，用于表单验证
label	String	-	表单项标签文
labelWidth	Number/String	-	标签宽度，优先级高于 Form 组件labelWidth
labelPosition	String	-	标签位置，优先级高于 Form 组件labelPosition
required	Boolean	false	是否必填，会自动添加必填标记
error	String	-	自定义错误信
showMessage	Boolean	true	是否显示错误信息
inlineMessage	Boolean	false	是否将错误信息显示在输入框右

Slots

名称	说明
default	表单控件内容
label	自定义标签内
error	自定义错误信息内
extra	自定义额外内容，显示在输入框下方

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/form/form-item/form-item