Mojo UI

Appearance

Form 表单 ​

MoForm 负责收集表单项并统一校验，MoFormItem 负责字段标签、必填标记、帮助文本和错误提示。典型用法是：给 MoForm 传入 model 和 rules，每个 MoFormItem 用 prop 对应 model 的字段。

基础用法 ​

Light
用于接收任务通知。
Dark
用于接收任务通知。
vue
<script setup lang="ts">
import { reactive } from "vue";
import { requiredRule, phoneRule } from "@yymojo-tec/mojo-ui";

const model = reactive({ name: "", phone: "" });
const rules = {
  name: [requiredRule("请输入名称")],
  phone: [requiredRule("请输入手机号"), phoneRule("手机号格式不正确")],
};
</script>

<template>
  <MoForm
    :model="model"
    :rules="rules"
    theme="dark"
    label-position="top"
  >
    <MoFormItem label="名称" prop="name" required>
      <MoInput v-model="model.name" placeholder="请输入名称" />
    </MoFormItem>
    <MoFormItem label="手机号" prop="phone" required help="用于接收任务通知。">
      <MoInput
        v-model="model.phone"
        placeholder="请输入手机号"
      />
    </MoFormItem>
  </MoForm>
</template>

Label 布局 ​

Light
Dark
vue
<MoForm
  :model="model"
  :rules="rules"
  label-position="right"
  :label-width="92"
  label-suffix=":"
>
  ...
</MoForm>

校验与重置 ​

点击“提交”会调用 formRef.validate()。resetFields() 当前只清空校验状态，不会重置 model 字段值。

Light
尚未校验
Dark
尚未校验
ts
const formRef = ref();
const result = await formRef.value?.validate();

if (result?.valid) {
  // submit
}

formRef.value?.resetFields();

单项规则与帮助文本 ​

规则既可以写在 MoForm 的 rules 上，也可以直接写在 MoFormItem 的 rules 上。help 会在没有错误时展示，出现错误后自动被错误信息替代。

Light
示例：MOJO-001
Dark
示例：MOJO-001
vue
<MoFormItem
  label="资源编码"
  prop="code"
  required
  :rules="{
    validator: (value) =>
      String(value || '').startsWith('MOJO-') || '编码需要以 MOJO- 开头',
  }"
  help="示例：MOJO-001"
>
  <MoInput v-model="model.code" />
</MoFormItem>

必填星号与错误提示 ​

Light
Dark
vue
<MoForm require-asterisk-position="right" :show-message="false">
  ...
</MoForm>

自定义 Label 与默认插槽参数 ​

MoFormItem 的 label 插槽可以自定义标签内容；默认插槽会收到 { error, validate }，适合在字段失焦时单独触发当前项校验。

vue
<MoFormItem label="邮箱" prop="email" :rules="emailRule('邮箱格式不正确')">
  <template #label="{ required, label }">
    <span>{{ label }}</span>
    <MoTag v-if="required" size="small" color="rose">必填</MoTag>
  </template>

  <template #default="{ error, validate }">
    <MoInput v-model="model.email" @blur="validate" />
    <span v-if="error">{{ error }}</span>
  </template>
</MoFormItem>

Form API ​

属性说明类型默认值
model表单数据对象Record<string, unknown>-
rules表单校验规则，key 对应 MoFormItem.propRecord<string, MojoRule | MojoRule[]>-
theme主题light | darklight
labelPosition标签位置left | right | topright
labelWidth标签宽度string | number-
requireAsteriskPosition必填星号位置left | rightleft
labelSuffix标签后缀string-
showMessage是否显示校验消息booleantrue

Form Exposes ​

方法说明返回值
validate()校验所有已注册表单项Promise<{ valid: boolean; errors: Record<string, string> }>
resetFields()清空所有表单项校验状态，不重置字段值void

FormItem API ​

属性说明类型默认值
label标签文本string-
prop字段名，需要对应 model 的 keystring-
required是否显示必填标记；没有必填规则时会自动补一个必填规则booleanfalse
rules当前项校验规则，会和 Form 上同 prop 的规则合并MojoRule | MojoRule[]-
help辅助说明；有错误时不显示string-

FormItem Slots ​

插槽说明
default表单项内容，参数 { error, validate }
label自定义标签，参数 { label, required, suffix, prop }

校验规则 ​

方法说明
requiredRule(message?)创建必填规则
emailRule(message?)创建邮箱规则
phoneRule(message?)创建中国大陆手机号规则
isEmpty(value)判断空值
isRequired(value)判断必填是否通过
isEmail(value)判断邮箱格式
isPhone(value)判断手机号格式