Sunlight UI

主题

Sunlight-creator2025-06-07
832
3.4m

SunlightForm ​

SunlightForm 是基于 Element Plus 表单组件封装的高级表单组件，提供了更便捷的配置方式和丰富的功能扩展，包括多类型表单控件、动态列配置、表单验证、异步选项加载等功能。

特性 ​

  • 功能丰富：支持多种表单控件类型，包括输入框、文本域、下拉选择、日期选择、图片上传等
  • 配置简单：通过简洁的配置数组实现复杂表单，减少模板代码
  • 高度可定制：支持自定义组件样式、事件处理和异步选项加载
  • 表单验证：集成 Element Plus 的表单验证机制
  • 响应式设计：支持响应式布局和动态列配置
  • 类型安全：提供完整的 TypeScript 类型定义
  • 易于扩展：支持自定义表单控件和插槽

快速开始 ​

基本用法 ​

vue
<template>
  <SunlightForm v-model="formData" :columns="columns" :rules="rules">
    <template #operation>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleReset">重置</el-button>
    </template>
  </SunlightForm>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { SunlightForm } from "@sunlight-ui/components";

// 表单数据
const formData = ref({
  name: "",
  email: "",
  age: null,
  department: "",
});

// 表单列配置
const columns = ref([
  {
    prop: "name",
    label: "姓名",
    type: "input",
    span: 12,
    placeholder: "请输入姓名",
  },
  {
    prop: "email",
    label: "邮箱",
    type: "input",
    span: 12,
    placeholder: "请输入邮箱",
  },
  {
    prop: "age",
    label: "年龄",
    type: "input",
    span: 12,
    inputType: "number",
    placeholder: "请输入年龄",
  },
  {
    prop: "department",
    label: "部门",
    type: "select",
    span: 12,
    placeholder: "请选择部门",
    options: [
      { label: "技术部", value: "tech" },
      { label: "市场部", value: "market" },
      { label: "销售部", value: "sales" },
      { label: "人事部", value: "hr" },
    ],
  },
]);

// 表单验证规则
const rules = ref({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" },
  ],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
  department: [{ required: true, message: "请选择部门", trigger: "change" }],
});

// 提交表单
function handleSubmit() {
  // 表单验证和提交逻辑
}

// 重置表单
function handleReset() {
  // 重置表单逻辑
}
</script>

组件文档 ​

  • 基本用法：介绍 SunlightForm 的基本配置和使用方法
  • 高级功能：介绍 SunlightForm 的高级特性和配置

API 参考 ​

Props ​

属性类型默认值说明
modelValueObject{}表单数据对象
formOptionsObject{}表单配置选项
columnsArray-表单列配置数组
rulesObject{}表单验证规则

FormOptions ​

属性类型默认值说明
labelWidthstring'100px'标签宽度
sizestring'default'表单尺寸
inlinebooleanfalse是否为行内表单
disabledbooleanfalse是否禁用表单
labelSuffixstring':'标签后缀

FormColumn ​

属性类型默认值说明
propstring-字段名，对应表单数据的属性
labelstring-标签名
typestring-表单控件类型
spannumber24所占列数
offsetnumber0偏移列数
placeholderstring-占位符
disabledbooleanfalse是否禁用
clearablebooleantrue是否可清空
multiplebooleanfalse是否支持多选（针对select等控件）
filterablebooleanfalse是否支持过滤（针对select等控件）
optionsArray[]选项列表或异步加载函数

支持的表单控件类型 ​

类型说明
input输入框
textarea文本域
select下拉选择器
cascader级联选择器
radio单选框
checkbox多选框
date-picker日期选择器
datetime-picker日期时间选择器
images图片上传

浏览器兼容性 ​

  • Chrome ≥ 90
  • Firefox ≥ 88
  • Safari ≥ 14
  • Edge ≥ 90

相关链接 ​