Form 表单

不过是些许风霜罢了

基础用法

表单组件的需要各类的表单项支撑，但是目前还在不断完善中，所以暂时先展示一些基础用法，等待后续完善

用户名

密码

年龄

爱好

吃饭睡觉打豆豆

<script setup lang="ts">
import { ref } from 'vue'

const formData = ref({
  username: '',
  password: '',
  age: '',
  hobbys: ['睡觉']
})

const onSubmit = () => {
  console.log('submit')
}
</script>

<template>
  <c-form ref="form" :model="formData" :label-width="60">
    <c-form-item label="用户名" prop="username">
      <c-input
        v-model="formData.username"
        placeholder="please input username"
      ></c-input>
    </c-form-item>
    <c-form-item label="密码" prop="password">
      <c-input
        v-model="formData.password"
        placeholder="please input possword"
      ></c-input>
    </c-form-item>
    <c-form-item label="年龄" prop="age">
      <c-input v-model="formData.age" placeholder="please input age"></c-input>
    </c-form-item>
    <c-form-item label="爱好" prop="hobbys">
      <c-checkbox-group v-model="formData.hobbys">
        <c-checkbox label="吃饭" value="吃饭"></c-checkbox>
        <c-checkbox label="睡觉" value="睡觉"></c-checkbox>
        <c-checkbox label="打豆豆" value="打豆豆"></c-checkbox>
      </c-checkbox-group>
    </c-form-item>
    <c-form-item>
      <c-button>取消</c-button>
      <c-button type="primary" @click="onSubmit">提交</c-button>
    </c-form-item>
  </c-form>
</template>

<style scoped></style>

对其方式

通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部

用户名

密码

年龄

爱好

吃饭睡觉打豆豆

<script setup lang="ts">
import { ref } from 'vue'

const formData = ref({
  username: '',
  password: '',
  age: '',
  hobbys: ['睡觉']
})

const labelPosition = ref('top')

const handleClick = (pos: string) => {
  labelPosition.value = pos
}
</script>

<template>
  <div class="show-row">
    <c-button-group type="primary">
      <c-button @click="handleClick('left')"> Left </c-button>
      <c-button @click="handleClick('top')"> Top </c-button>
      <c-button @click="handleClick('right')"> Right </c-button>
    </c-button-group>
  </div>

  <c-form
    ref="form"
    :label-position="labelPosition"
    :model="formData"
    :label-width="60"
  >
    <c-form-item label="用户名" prop="username">
      <c-input
        v-model="formData.username"
        placeholder="please input username"
      ></c-input>
    </c-form-item>
    <c-form-item label="密码" prop="password">
      <c-input
        type="password"
        show-password
        v-model="formData.password"
        placeholder="please input possword"
      ></c-input>
    </c-form-item>
    <c-form-item label="年龄" prop="age">
      <c-input v-model="formData.age" placeholder="please input age"></c-input>
    </c-form-item>
    <c-form-item label="爱好" prop="hobbys">
      <c-checkbox-group v-model="formData.hobbys">
        <c-checkbox label="吃饭" value="吃饭"></c-checkbox>
        <c-checkbox label="睡觉" value="睡觉"></c-checkbox>
        <c-checkbox label="打豆豆" value="打豆豆"></c-checkbox>
      </c-checkbox-group>
    </c-form-item>
  </c-form>
</template>

<style scoped></style>

表单校验

Form 组件提供表单验证功能，这也是经常使用的场景，通过给 rules 传入约定的验证规则即可，需要注意的是 form-item 的 prop 属性的设置，需与规则的 key 保持一致， 更多的用法请参考 async-validator

用户名

密码

地址

爱好

吃饭睡觉打豆豆

<script setup lang="ts">
import type { FormInstance, FormDataRules } from 'coderjc-ui'
import { reactive, ref } from 'vue'

interface RuleForm {
  username: string
  password: string
  address: string
  hobbys: string[]
}

const formData = reactive<RuleForm>({
  username: '',
  password: '',
  address: '',
  hobbys: []
})

const ruleFormRef = ref<FormInstance>()

const rules: FormDataRules<typeof formData> = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度在3到10个字符', trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '密码长度在6到16个字符', trigger: 'change' }
  ],
  address: [{ required: true, message: '请输入你的地址', trigger: 'blur' }],
  hobbys: [
    { type: 'array', required: true, message: '请选择爱好', trigger: 'change' }
  ]
})

const resetForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.clearValidates()
}

// 校验存在两种用法，根据你的喜好选择合适的即可
//  - 1. async await
const submitForm = async () => {
  if (!ruleFormRef.value) return

  try {
    const result = await ruleFormRef.value.validate()
    console.log('submit success: ', result, formData)
  } catch (error) {
    console.log('submit error', error)
  }
}
//  - 2. callback
// const submitForm = () => {
//   if (!ruleFormRef.value) return

//   ruleFormRef.value.validate((valid, fields) => {
//     if (valid) {
//       console.log('submit success: ', valid)
//     } else {
//       console.log('submit error: ', fields)
//     }
//   })
// }
</script>

<template>
  <c-form ref="ruleFormRef" :model="formData" :rules="rules" :label-width="60">
    <c-form-item label="用户名" prop="username">
      <c-input
        v-model="formData.username"
        placeholder="please input username"
      ></c-input>
    </c-form-item>
    <c-form-item label="密码" prop="password">
      <c-input
        type="password"
        show-password
        v-model="formData.password"
        placeholder="please input possword"
      ></c-input>
    </c-form-item>
    <c-form-item label="地址" prop="address">
      <c-input
        v-model="formData.address"
        placeholder="please input age"
      ></c-input>
    </c-form-item>
    <c-form-item label="爱好" prop="hobbys">
      <c-checkbox-group v-model="formData.hobbys">
        <c-checkbox label="吃饭" value="吃饭"></c-checkbox>
        <c-checkbox label="睡觉" value="睡觉"></c-checkbox>
        <c-checkbox label="打豆豆" value="打豆豆"></c-checkbox>
      </c-checkbox-group>
    </c-form-item>
    <c-form-item>
      <c-button @click="resetForm">重置</c-button>
      <c-button type="primary" @click="submitForm"> 创建 </c-button>
    </c-form-item>
  </c-form>
</template>

<style scoped></style>

尺寸

通过给 Form 组件设置 size 属性，可以改变表单内组件的尺寸，可选值为 large、default、small，当然，你也可以给表单组件单独设置 size 来覆盖 Form 组件设置的 size 属性

NOTE

因为 checkbox 组件编写的时候没有考虑按钮状态样式，所以 checkbox 的 size 变化还在开发中

用户名

密码

年龄

爱好

吃饭睡觉打豆豆

<script setup lang="ts">
import { SizeType } from 'coderjc-ui'
import { ref } from 'vue'

const formData = ref({
  username: '',
  password: '',
  age: '',
  hobbys: ['睡觉']
})

const size = ref('default')

const handleClick = (val: SizeType) => {
  size.value = val
}
</script>

<template>
  <div class="show-row">
    <c-button-group type="primary">
      <c-button @click="handleClick('large')"> Large </c-button>
      <c-button @click="handleClick('default')"> Default </c-button>
      <c-button @click="handleClick('small')"> Small </c-button>
    </c-button-group>
  </div>

  <c-form ref="form" :size="size" :model="formData" :label-width="60">
    <c-form-item label="用户名" prop="username">
      <c-input
        v-model="formData.username"
        placeholder="please input username"
      ></c-input>
    </c-form-item>
    <c-form-item label="密码" prop="password">
      <c-input
        type="password"
        show-password
        v-model="formData.password"
        placeholder="please input possword"
      ></c-input>
    </c-form-item>
    <c-form-item label="年龄" prop="age">
      <c-input v-model="formData.age" placeholder="please input age"></c-input>
    </c-form-item>
    <c-form-item label="爱好" prop="hobbys">
      <c-checkbox-group v-model="formData.hobbys">
        <c-checkbox label="吃饭" value="吃饭"></c-checkbox>
        <c-checkbox label="睡觉" value="睡觉"></c-checkbox>
        <c-checkbox label="打豆豆" value="打豆豆"></c-checkbox>
      </c-checkbox-group>
    </c-form-item>
    <c-form-item>
      <c-button>重置</c-button>
      <c-button type="primary"> 创建 </c-button>
    </c-form-item>
  </c-form>
</template>

<style scoped></style>

Form API

Form 属性

属性名	说明	类型	默认值
model	表单数据对象	`object`	--
rules	表单验证规则	`FormItemRule / FormItemRule[]`	--
label-position	表单域标签的位置，当设置为 `left` 或 `right` 时，一般也需要设置 `label-width` 属性	`'left' / 'top' / 'right'`	left
label-width	标签的长度，例如 `'50px'`	`string` / `number`	--
size	用于控制该表单内组件的尺寸	`'large' / 'default' / 'small' / ''`	''

Form 插槽

插槽名	说明
default	自定义默认内容

Form Exposes

名称	说明	类型
validate	对整个表单的内容进行验证。接收一个回调函数，或返回 `Promise`	`Function`
validateField	验证具体的某个字段。	`Function`
resetFields	重置该表单项，将其值重置为初始值，并移除校验结果	`Function`
clearValidate	清理某个字段的表单验证信息。	`Function`
fields	获取所有字段的 context	`array`

FormItem API

FormItem 属性

属性名	说明	类型	Default
prop	`model` 的键名，在你需要校验的时候，该属性是必填的	`string`	--
label	标签文本	`string`	--
required	是否为必填项，如不设置，则会根据校验规则确认	`boolean`	false
rules	表单验证规则，`teigger` 为校验规则的触发方式，更多内容可以参考 async-validator	`FormItemRule / FormItemRule[]`	--
show-message	是否显示校验错误信息，一般当你需要自定义错误样式或者保持表单清爽时可以关闭	`boolean`	true
size	用于控制该表单域下组件的默认尺寸	`'large' / 'default' / 'small' / ''`	''

Form 插槽

插槽名	说明	类型
default	表单的内容	--
label	标签位置显示的内容	`object`
error	验证错误信息的显示内容，你可以使用作用域插槽的方式接收到错误消息	`object`

Form 表单 ​

基础用法 ​

对其方式 ​

表单校验 ​

尺寸 ​

Form API ​

Form 属性 ​

Form 插槽 ​

Form Exposes ​

FormItem API ​

FormItem 属性 ​

Form 插槽 ​

Form 表单

基础用法

对其方式

表单校验

尺寸

Form API

Form 属性

Form 插槽

Form Exposes

FormItem API

FormItem 属性

Form 插槽