vue-weui

Appearance

Form 表单 ​

form表单组件用于处理用户编辑表单。

基础使用 ​

显示代码
vue
<weui-form>
  <weui-form-item label="姓名" name="name">
    <weui-input placeholder="请输入姓名" />
  </weui-form-item>
  <weui-form-item label="age" name="age">
    <weui-input placeholder="请输入年龄" />
  </weui-form-item>
</weui-form>

设置表单标题和描述 ​

显示代码
vue
<weui-form title="表单标题" desc="表单描述">
  <weui-form-item label="姓名" name="name">
    <weui-input placeholder="请输入姓名" />
  </weui-form-item>
  <weui-form-item label="age" name="age">
    <weui-input placeholder="请输入年龄" />
  </weui-form-item>
</weui-form>

表单校验 ​

显示代码
vue
<template>
  <weui-form ref="formRef" :model="value" :rules="rules">
    <weui-form-item label="姓名" name="name">
      <weui-input v-model="value.name" placeholder="请输入姓名" />
    </weui-form-item>
    <weui-form-item label="age" name="age">
      <weui-input v-model="value.age" placeholder="请输入年龄" />
    </weui-form-item>
    <weui-button type="primary" @click="submitForm">提交</weui-button>
  </weui-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { FormInstance } from 'vue-weui-next';

const formRef = ref<FormInstance>();
const value = ref({
  name: '',
  age: ''
});
const rules = {
  name: {
    type: 'string',
    message: '名称为字符串'
  },
  age: [
    {
      required: true,
      message: '年龄必填'
    }
  ]
};
const submitForm = () => {
  formRef.value?.validate().then(res => {
    console.log(res);
  });
}
</script>

表单分组 ​

显示代码
vue
<weui-form>
  <weui-form-group title="分组标题">
    <weui-form-item label="姓名" name="name">
      <weui-input placeholder="请输入姓名" />
    </weui-form-item>
    <weui-form-item label="age" name="age">
      <weui-input placeholder="请输入年龄" />
    </weui-form-item>
  </weui-form-group>
</weui-form>

API ​

Form Props ​

名称类型默认值说明版本
titlestring ｜ -表单标题-
descstring-表单描述-
modelRecord<string, any>-表单数据，用于表单校验-
rulesRules-表单校验规则-
validateToAlertbooleanfalse在校验失败时弹出alert提示-
validateAlertstring(errors: ValidateError[]) => string-alert提示内容
validateShowWarnbooleanfalse在校验失败时显示表单警告提示-

Form Slots ​

名称参数说明版本
title-自定义表单标题-
desc-自定义表单描述-
default-表单内容-
ft-表单底部区域内容-

Form APIS ​

名称描述参数版本
validate执行表单校验(nameList?: string[]) => Promise<Values>-
resetFields重置表单值和校验错误信息(nameList?: string[]) => void-
clearValidate清除表单校验错误信息(nameList?: string[]) => void-

FormGroup Props ​

名称类型默认值说明版本
titlestring-分组标题-

FormGroup Slots ​

名称参数说明版本
title-自定义分组标题-
default-分组表单内容-

FormItem Props ​

名称类型默认值说明版本
namestring-字段名称-
labelstring-字段描述-
ruleRule-字段校验规则-
verticalbooleanfalse是否垂直排列-

FormItem Slots ​

名称参数说明版本
default-表单元素内容-