sets-ui

Appearance

Form 表单 ​

基础用法 ​

最基础的表单功能，使用 form-item 组件作为 form 输入项的容器

名称
工作类型
vue
<script setup lang="ts">
import type { FormInstance } from '@sets-ui/main';
import { ref, reactive } from 'vue'

const formRef = ref<FormInstance>();

const form = reactive({
  name: '',
  type: '',
})

const hanldeSubmit = () => {
  console.log('submit!');
};
</script>

<template>
  <s-form ref="formRef" :model="form">
    <s-form-item label="名称">
      <s-input v-model="form.name" placeholder="请输入名称" style="width: 200px;" />
    </s-form-item>
    <s-form-item label="工作类型">
      <s-radio-group v-model="form.type">
        <s-radio value="A">前端开发</s-radio>
        <s-radio value="B">后端开发</s-radio>
      </s-radio-group>
    </s-form-item>
    <s-form-item>
      <s-button type="primary" @click="hanldeSubmit">提交</s-button>
    </s-form-item>
  </s-form>
</template>

表单校验 ​

为 rules 属性传入约定的验证规则，并将 form-Item 的 name 属性设置为需要验证的键值即可

名称
工作类型
vue
<script setup lang="ts">
import type { FormInstance } from '@sets-ui/main';
import { ref, reactive } from 'vue'

const formRef = ref<FormInstance>();

const form = reactive({
  name: '',
  type: '',
})

const rules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 2, max: 4, message: '请输入2到4位的名称', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请选择类型' },
  ],
};

const hanldeSubmit = () => {
  if (!formRef.value) return;
  formRef.value.validate().then((res) => {
    console.log('校验成功', res);
  }).catch((res) => {
    console.log('校验失败', res);
  });
};
</script>

<template>
  <s-form ref="formRef" :model="form" :rules="rules">
    <s-form-item label="名称" name="name">
      <s-input v-model="form.name" placeholder="请输入名称" style="width: 200px;" />
    </s-form-item>
    <s-form-item label="工作类型" name="type">
      <s-radio-group v-model="form.type">
        <s-radio value="A">前端开发</s-radio>
        <s-radio value="B">后端开发</s-radio>
      </s-radio-group>
    </s-form-item>
    <s-form-item>
      <s-button type="primary" @click="hanldeSubmit">提交</s-button>
    </s-form-item>
  </s-form>
</template>

自定义校验 ​

为 rules 属性传入约定的验证规则，可以使用 validator 字段返回一个 Promise 来确定校验状态

名称
期望薪资
校验中...
工作类型
vue
<script setup lang="ts">
import type { FormInstance } from '@sets-ui/main';
import { ref, reactive } from 'vue'

const formRef = ref<FormInstance>();

const form = reactive({
  name: '',
  salary: 10000,
  type: '',
})

const salaryValidating = ref(false);

const rules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 2, message: '名称最少为两位', trigger: 'blur' },
    {
      validator: (value: any) => {
        return new Promise((resolve, reject) => {
          if (value !== '黑奴') {
            reject('名称错误，为您查询到名称: 黑奴')
          } else {
            resolve(true);
          }
        })
      },
      trigger: 'blur',
    }
  ],
  salary: [
    { required: true, message: '请输入期望薪资' },
    {
      validator: (value: any) => {
        return new Promise((resolve, reject) => {
          if (isNaN(parseFloat(value))) return reject('请输入数字！');
          salaryValidating.value = true;
          window.setTimeout(() => {
            if (Number.parseInt(value, 10) > 2100) {
              reject('薪资最高不得超过2100！')
            } else {
              resolve(true);
            }
            salaryValidating.value = false;
          }, 3000);
        })
      },
    }
  ],
  type: [
    { required: true, message: '请选择类型' },
  ],
};

const hanldeSubmit = () => {
  if (!formRef.value) return;
  formRef.value.validate().then((res) => {
    console.log('校验成功', res);
  }).catch((res) => {
    console.log('校验失败', res);
  });
};

const hanldeSubmitField = () => {
  if (!formRef.value) return;
  formRef.value.validateField(['salary']).then((res) => {
    console.log('校验成功', res);
  }).catch((res) => {
    console.log('校验失败', res);
  });
};

const hanldeReset = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
}
</script>

<template>
  <s-form ref="formRef" :model="form" :rules="rules">
    <s-form-item label="名称" name="name">
      <s-input v-model="form.name" placeholder="请输入名称" style="width: 200px;" />
    </s-form-item>
    <s-form-item label="期望薪资" name="salary">
      <s-input v-model="form.salary" placeholder="请输入期望薪资" style="width: 200px;" />
      <span v-show="salaryValidating" style="margin-left: 5px;font-size: 12px;">校验中...</span>
    </s-form-item>
    <s-form-item label="工作类型" name="type">
      <s-radio-group v-model="form.type">
        <s-radio value="A">前端开发</s-radio>
        <s-radio value="B">后端开发</s-radio>
      </s-radio-group>
    </s-form-item>
    <s-form-item>
      <s-button type="primary" @click="hanldeSubmit">提交</s-button>
      <s-button type="primary" @click="hanldeSubmitField">校验</s-button>
      <s-button @click="hanldeReset">重置</s-button>
    </s-form-item>
  </s-form>
</template>

Form API ​

Form Attributes ​

名称说明类型默认值
model表单数据对象{ [key: string]: any }-
rules表单验证规则FormRules-
label-width标签的长度number-

Form Exposes ​

名称说明类型默认值
validateField验证具体的某个字段。(names: Array<string>) => Promise(ValidateErrorInfo)-
validate对整个表单的内容进行验证。(names: Array<string>) => Promise(ValidateErrorInfo)false
clearValidate清理整个表单的验证信息。() => void-
resetFields重置该表单项，将其值重置为初始值，并移除校验结果

Form Item API ​

Form Item Attributes ​

名称说明类型默认值
label标签文本string-
namemodel 的键名string-
label-width标签的长度number-

Form Item CSS ​

名称说明默认值
--s-form-item-size-base基准规格(字体、行高)大小var(--base-font-size)
--s-form-item-grap-labellabel与content的检举12px