Elin-UI

Appearance

Form 表单 ​

基础用法 ​

查看代码
vue
<template>
  <div style="width: 450px">
    <e-form :data="formValues" ref="formRef">
      <e-form-item label="用户名" name="username">
        <e-input v-model="formValues.username" />
      </e-form-item>
      <e-form-item label="密码" name="password">
        <e-input v-model="formValues.password" />
      </e-form-item>
      <e-form-item>
        <e-button @click="handleSubmit" type="primary">提交</e-button>
      </e-form-item>
    </e-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { EMessage } from '@/components'

const formRef = ref()

const formValues = reactive({
  username: '',
  password: '',
  mode: ''
})

const handleSubmit = async () => {
  await formRef.value.validate()

  EMessage.success('校验通过')
}
</script>

表单校验 ​

查看代码
vue
<template>
  <div style="width: 450px">
    <e-form :data="formValues" ref="formRef">
      <e-form-item
        label="用户名"
        name="username"
        :rules="[
          {
            type: 'string',
            required: true,
            message: '该字段是必填字段！'
          } as RuleItem
        ]"
      >
        <e-input v-model="formValues.username" />
      </e-form-item>
      <e-form-item
        label="密码"
        name="password"
        :rules="[
          {
            type: 'string',
            required: true,
            message: '该字段是必填字段！'
          } as RuleItem
        ]"
      >
        <e-input v-model="formValues.password" type="password" />
      </e-form-item>
      <e-form-item>
        <e-button @click="handleSubmit" type="primary">提交</e-button>
      </e-form-item>
    </e-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { RuleItem } from 'async-validator'
import { EMessage } from '@/components'

const formRef = ref()

const formValues = reactive({
  username: '',
  password: '',
  mode: ''
})

const handleSubmit = async () => {
  await formRef.value.validate()

  EMessage.success('校验通过')
}
</script>

Form API ​

defineProps ​

属性名说明类型默认值
data表单值object--
disabled禁用整个表单booleanfalse
rules校验规则FormRules--

defineExpose ​

属性名说明类型默认值
validate校验表单()=>Promise--
validateField校验某个字段(name)=>Promise--

FormItem API ​

Props ​

属性名说明类型默认值
label字段标签string--
name字段表示string--
rules字段校验规则FormRule--

Expose ​

属性名说明类型
validate校验整个表单()=>Promise<void>
validateField校验某个字段(name)=>Promise<void>