sinsoft-common-form
v2.8.1
Published
参数介绍model
Readme
参数介绍model
表单 属性 | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------------------------------------------------------|--------|--------| | v-model | 表单数据,双向绑定(字段需与 prop 属性一样) | Object | | | fieldList | 表单项配置列表 | Object | | | options | 属性labelPosition配置表单标签位置，isDisabled配置是否全部不可编辑，btnConfig配置按钮配置 | Object | |
表单项 配置属性
formItemList 配置属性 | 参数 | 说明 | 类型 | 默认值 | 必填项 | |-----------|------------------------------------------------------------------------------------------|--------|--------|--------| | type | 表单项类型 | String | | 是 | | label | 表单项标签名 为空的时候不显示但是标签高度在 | String | | 否 | | required | 是否显示标签名右边的*星号 | Boolean | | 否 | | disabled | 是否可编辑 | Boolean | | 否 | | field | 表单项字段 | String | | 是 | | rules | 表单验证规则 | Object | | 否 | | style | 表单项样式，可以在已有布局的基础上自定义宽度等样式 | String | | 否 | | options | 下拉、多选、单选必配置项，配置选项数据data数组 单项和多选属性：isDisabled 单项是否禁用 | Object | | 是 | | ways | 单选和多选的选项是横向排列row还是竖向排列column | String | | 否 | | prepend | 输入框前置内容 | String | | 否 | | append | 输入框后置内容 | String | | 否 | | isHide | 表单项是否显示 | Boolean | | 否 | | tipsBlow | 下拉框下的灰色提示 | String | | 否 | | tipsBlowStyle | 下拉框下的灰色提示样式 | String | | 否 | | maxlength | 最大输入长度 | string/ number | | 否 | | maxlengthNameEnFamily | 英文姓最大输入长度 | string/ number | | 否 | | maxlengthNameEn | 英文名最大输入长度 | string/ number | | 否 | | maxlengthNameChFamily | 中文姓最大输入长度 | string/ number | | 否 | | maxlengthNameCh | 中文名最大输入长度 | string/ number | | 否 | | isReadonlyNameEnFamily | 英文姓是否只读样式 | Boolean | | 否 | | isReadonlyNameEn | 英文名是否只读样式 | Boolean | | 否 | | isReadonlyNameChFamily | 中文姓是否只读样式 | Boolean | | 否 | | isReadonlyNameCh | 中文名是否只读样式 | Boolean | | 否 | | rows | 输入框行数，仅 type 为 'textarea' 时有效 | String | | 否 | | autosize | textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 } | Object | | 否 | | disabledDate |一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 | function(Date) | | 否 | | xs | 在小屏幕设备上的列宽，小于 576px的屏幕宽度 | Number | 24 | 否 | | sm | 在中等屏幕设备上的列宽，介于 576px 和 768px 之间的屏幕宽度 | Number | 24 | 否 | | md | 在大屏幕设备上的列宽，介于 768px 和 992px 之间的屏幕宽度 | Number | 8 | 否 | | lg | 在更大屏幕设备上的列宽，介于 992px 和 1200px 之间的屏幕宽度 | Number | 8 | 否 | | xl | 在最大屏幕设备上的列宽，大于等于 1200px 的屏幕宽度 | Number | 8 | 否 | | slotItemName | 表单项插槽名 | String | | 否 | | slotLabelName | 标签插槽名 | String | | 否 | | showWordLimit | 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效 | Boolean | | 否 | | showTo | 是否显示中间字段,并且传国际化的值如'to', 只在 type 为 'date' 的时候生效 | String | | 否 | | widthNation | 国家下拉宽度, 只在 type 为 'phone' 的时候生效 如300px | String | | 否 | | widthArea | 地区下拉宽度, 只在 type 为 'phone' 的时候生效 如300px | String | | 否 | | isReadonlyNation | 国家号是否只读样式 | Boolean | | 否 | | isReadonlyArea | 地区号是否只读样式 | Boolean | | 否 | | isReadonlyPhoneNumber | 手机号是否只读样式 | Boolean | | 否 | | isReadonly | 表单项是否只读样式 | Boolean | | 否 | | openDisabled | 表单项是否在全部禁用的时候打开，true为打开 | Boolean | false | 否 |
Form 方法
| 事件名 | 说明 | 回调参数 | |------------------------|--------------------------|------------------------------| | submit等在按钮中配置的方法名 | 点击确认按钮拿到表单数据 | mode表单数据、code按钮编码 | | selectChange | 下拉选项点击触发方法 | code点击项对应编码，field对应字段 | | radioChange | 单选选项点击触发方法 | code点击项对应编码，field对应字段 | | checkChange | 多选选项点击触发方法 | code点击项对应编码，field对应字段 | | dateChange | 日期点击触发方法 | date对应选择日期，field对应字段 | | inputBlur | 当选择器的输入框失去焦点时触发 | val输入对应事件，field对应字段 | | inputFocus | 当选择器的输入框获得焦点时触发 | val输入对应事件，field对应字段 | | inputChange | 仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发 | val输入对应事件，field对应字段 | | inputInput | 在 Input 值改变时触发 | val输入对应事件，field对应字段 |
Form 暴露的对象
| 对象名 | 说明 | |------------------------|----------------------| | formRef | 表单校验ref |
Slots 插槽
| 插槽名 | 说明 | |------------------------|--------------------------| | slotItemName（自己定义） | 表单类型type为slotItem时,在表单中组件标签中加插槽内容。v-model绑定的字段，需要和表单项中filed定义的名字一样才能校验成功。 | | buttons | 如果不使用默认的按钮可以使用插槽自定义内容， 插槽返回的model就是当前表单的数据，插槽返回的onBtnClick是表单提交方法，参数一code:按钮组件编码，参数二true or false:是否校验表单参数三'methodName'方法名自己取名定义，对应表单触发方法 |
btnConfig 配置
| 属性名 | 类型 | 说明 | 类型 | 默认值 | |----------------|------------|---------------------------|-------------------|---------------------| | isShow | boolean | "false"| 控制按钮是否显示。可选值: "true" 或 "false"。默认值为 "true"。| | plain | Boolean | 固定白色背景，红色文字（普通提交按钮） | 否 | false | | info | Boolean | 灰色背景 白色字体（置灰状态按钮） | 否 | false | | text | Boolean | 纯文字，带有宽度。 | 否 | false | | link | Boolean | 纯文字 无宽度，a链接式。 无任何背景颜色。 | 否 | false | | default | Boolean | 白色背景 深灰色字体（重置按钮） | 否 | false | | loading | Boolean | loading是否开启 | 否 | false | | height | String | 按钮高度 | 否 | '' | | Width | String | 按钮宽度 | 否 | '' | | color | String | 字体颜色（部分状态文字颜色可控制边框颜色） | 否 | '' | | circle | String | 圆角 | 否 | '' | | bgColor | String | 按钮背景颜色 | 否 | | | borderColor | String | 边框颜色（未设置相应同步字体颜色） | 否 | '' | | borderStyle | String | 边框类型 | 否 | solid | | borderWidth | String | 边框宽度 | | 1px | | loadingColor | String | loading icon颜色 | 否 | #333333 灰色 | | icon | String | icon名称及url | 否 | false | | loading | Boolean | loading是否开启 | 否 | false | | size | Number，String | icon大小 | 否 | auto | | fontSize | String | 字体大小 | | '' | | fontWeight | Number | 字体粗细 | | 500 | | btnCode | | code编码 | 是（存在请求） | | | style | object | 按钮样式对象。默认值为空对象 {}。 | | | | debounced | Boolean | 开启防抖 | 否 | false |
参考用例：
<template>
<SinosoftCommonForm
ref="formf"
:fieldList="fieldList"
:model="model"
:options="options"
@create="handleBaseSubmit"
@cancel="cancelClick"
@next="handleBaseNext"
@nextttt="handleBaseSubmit"
@last="handleLastClick"
@selectChange="selectChange"
@radioChange="radioChange"
@checkChange="checkChange"
@dateChange="dateChange"
@inputBlur="inputBlur"
>
<!-- 小项插槽示例 -->
<template v-slot:slotItemName1>
<div @click="slotClick">
<el-input
v-model="model.testSlotValue"
>
</el-input>
</div>
</template>
<template v-slot:slotItemName2>
<div>{{ }}</div>
</template>
<!-- label插槽示例 -->
<template v-slot:slotLabelNameTest>
<div>{{ 'hhhahah' }}</div>
</template>
<!-- 如果不使用默认的按钮可以使用插槽自定义内容， 插槽返回的model就是当前表单的数据 -->
<!-- <template #buttons="{ onBtnClick, model }">
<sinosoft-common-button
:size="15"
:width="'90px'"
:btnCode="''"
@handleClick="
(code) => {
onBtnClick(code, true, 'next'); //,参数一code:按钮组件编码，参数二true or false:是否校验表单，
//参数三'methodName'方法名自己取名定义，对应表单方法。如本次’next'触发@next对应的方法
}
"
:style="''"
>
{{ "下一步" }}
</sinosoft-common-button>
</template> -->
</SinosoftCommonForm>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { default as SinosoftCommonForm } from "../package/Index.vue";
import type { FormInstance } from "element-plus";
const formf = ref<FormInstance>();
const slotClick = () => {
console.log(formf.value, formf.value.formRef);
// formf.value.formRef.resetFields('others');
formf.value.resetFieldsTest();
};
const fieldList = reactive<Form.FormItem[]>([
{ type: "title", title: "Client Information", xl: 24 },
{
type: "select",
// labelStyle: '',
required: false,
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "jobbbbb",
// labelStyle: 'height: 22px',
placeholder: "Please select country of birth",
options: {
data: [
{ name: "吃饭", code: "1" },
{ name: "睡觉", code: "2" },
{ name: "写代码", code: "3" },
],
},
xs:24,// 每行的表单项该属性值之和等于24
sm:24,// 每行的表单项该属性值之和等于24
md:8,// 每行的表单项该属性值之和等于24
lg:8,// 每行的表单项该属性值之和等于24
xl:24,// 每行的表单项该属性值之和等于24
},
{
type: "slotItem",
label: "插槽例1",
isHide: false,
field: "testSlotValue",
slotItemName: "slotItemName1",
required: true,
rules: [{ required: false, message: "slotItemName is required" }],
xl: 6,
},
{
type: "select",
label: "Non-Sales Meeting Type",
isHide: false,
required: true,
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "jobe",
placeholder: "Please select country of birth",
options: {
data: [
{ name: "吃饭", code: "1" },
{ name: "睡觉", code: "2" },
{ name: "写代码", code: "3" },
],
},
xl: 6,
},
{
type: "input",
// label: "Othders",
field: "others",
required: false,
disabled: false,
isHide: false,
prepend: 'prepend',
// slotLabelName: 'slotLabelNameTest',
append: 'append',
rules: [{ required: true, message: "只读 is required" }],
placeholder: "Others",
xl: 6,
},
{
type: "name",
label: "姓名",
required: true,
span: 24,
maxlength: 9,
disabled: false,
isHide: false,
field: {
nameEnFamily: "nameEnFamily",
nameEn: "nameEn",
nameChFamily: "nameChFamily",
nameCh: "nameCh",
},
rules: {
nameEnFamily: [{ required: true, message: "11 is required" }],
nameEn: [{ required: true, message: "22 is required" }],
nameChFamily: [{ required: true, message: "33 is required" }],
nameCh: [{ required: true, message: "44 is required" }],
},
placeholderNameChFamily: "請輸入中文姓",
placeholderNameEnFamily: "請輸入英文姓",
placeholderNameEn: "請輸入英文名",
placeholderNameCh: "請輸入中文名",
xl: 24,
},
{
type: "input",
maxlength: 9,
label: "inputinputinputinputinputinputf",
labelStyle: "height:66px",
required: false,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
style: "",
placeholder: "Please select gender",
xl: 12,
},
{
type: "input",
maxlength: 9,
label:
"inputinputinputinpinputinputinpu tinputinpuinputinputputinpuinputinputtinputin pututinput",
required: true,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
style: "",
placeholder: "Please enter HKID",
xl: 12,
},
{
type: "date",
label: "Date of Birth",
required: true,
field: "datedd",
rules: [{ required: false, message: "日期 is required" }],
placeholder: "DD/MM/YYYY",
xl: 12,
},
{
type: "input",
maxlength: 9,
label: "HKID",
required: true,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter HKID",
xl: 12,
},
{
type: "date",
label: "Date of Birth",
required: true,
field: "datedd",
rules: [{ required: false, message: "日期 is required" }],
placeholder: "DD/MM/YYYY",
xs:12,
sm:12,
md:12,
lg:12,
xl: 12,
showTo: 'to'
},
{
type: "date",
label: "Date of Birth",
required: true,
field: "datedd",
rules: [{ required: false, message: "日期 is required" }],
placeholder: "DD/MM/YYYY",
xs:12,
sm:12,
md:12,
lg:12,
xl: 12,
},
{
type: "input",
maxlength: 9,
label: "HKID",
required: true,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter HKID",
xl: 12,
},
{
type: "select",
label: "Country of birth",
required: true,
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "Country",
placeholder: "Please select country of birth",
options: {
data: [
{ name: "吃饭", code: "1" },
{ name: "睡觉", code: "2" },
{ name: "写代码", code: "3" },
],
},
xl: 12,
},
{
type: "select",
label: "City of birth",
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "birth",
placeholder: "Please select country of birth",
options: {
data: [
{ name: "吃饭", code: "1" },
{ name: "睡觉", code: "2" },
{ name: "写代码", code: "3" },
],
},
xl: 12,
},
{
type: "select",
label: "Nationality",
required: true,
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "Nationality",
placeholder: "Please select country of birth",
style: "width:33%;padding-right: 0px",
tipsBlow: "tipsBlow tipsBlo ddaf ",
tipsBlowStyle: "width:500px",
options: {
data: [
{ name: "吃饭", code: "1" },
{ name: "睡觉", code: "2" },
{ name: "写代码", code: "3" },
],
},
xl: 24,
},
{ type: "line", xl: 24 },
{ type: "title", title: "Client Information", xl: 24 },
{
type: "phone",
label: "Phone No. (Mobile)",
maxlength: 9,
required: true,
rules: {
phoneNumber: [{ required: true, message: 'phoneNumber1 is required' }],
},
field: { nationCode: "nationCode",areaCode: "areaCode", phoneNumber: "phoneNumber" },
disabled: false,
placeholder: "请输入手机号码",
nationOptions: {
placeholder: "",
data: [
{ name: "852", code: "1" },
{ name: "654", code: "2" },
{ name: "765", code: "3" },
],
},
areaOptions: {
placeholder: "",
data: [
{ name: "+852", code: "1" },
{ name: "+654", code: "2" },
{ name: "+765", code: "3" },
],
},
xs: 24, // 小于 576px的屏幕宽度
sm: 24, // 介于 576px 和 768px 之间的屏幕宽度
md: 12, // 介于 768px 和 992px 之间的屏幕宽度
lg: 12, // 介于 992px 和 12px 之间的屏幕宽度
xl: 12, // 大于等于 1200px 的屏幕宽度
},
{
type: "phone",
label: " Phone No. (Residence)",
required: true,
rules: [{ required: true, message: "phoneNumber1 is required" }],
field: { nationCode: "nationCode",areaCode: "areaCode", phoneNumber: "phoneNumber" },
disabled: false,
placeholder: "请输入手机号码",
nationOptions: {
placeholder: "",
data: [
{ name: "852", code: "1" },
{ name: "654", code: "2" },
{ name: "765", code: "3" },
],
},
areaOptions: {
placeholder: "",
data: [
{ name: "+852", code: "1" },
{ name: "+654", code: "2" },
{ name: "+765", code: "3" },
],
},
xs: 24, // 小于 576px的屏幕宽度
sm: 24, // 介于 576px 和 768px 之间的屏幕宽度
md: 12, // 介于 768px 和 992px 之间的屏幕宽度
lg: 12, // 介于 992px 和 12px 之间的屏幕宽度
xl: 12, // 大于等于 1200px 的屏幕宽度
},
{
type: "input",
maxlength: 9,
label: "Email Address",
required: true,
field: "readonly",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "这是一个只读输入框",
xl: 8,
},
{
type: "checkboxRadio",
label: "Preferred Language - Written and Communication Preference ",
required: true,
field: "Preferred",
rules: [{ required: false, message: "多选 is required" }],
ways: "column",
options: {
data: [
{ name: "Cantonese", code: "0" },
{ name: "Mandarin", code: "2" },
{ name: "English", code: "3" },
{ name: "English", code: "3" },
{ name: "English", code: "3" },
{ name: "English", code: "3" },
],
},
xl: 12,
},
{
type: "checkbox",
label: "Preferred Language - Written and Communication Preference ",
required: true,
field: "Language",
rules: [{ required: false, message: "多选 is required" }],
ways: "row",
options: {
data: [
{ name: "Cantonese", code: "0", isDisabled: true },
{ name: "Mandarin", code: "2" },
{ name: "English", code: "3" },
],
},
xl: 12,
},
{
type: "radioNote",
label: "",
required: true,
field: "radioValue",
labelBefore: "Preferred Appointment Notification Channel",
rules: [{ required: false, message: "单选 is required" }],
options: {
data: [
{ name: "SMS", code: "1" },
{ name: "Email", code: "0" },
],
},
xl: 12,
},
{
type: "input",
maxlength: 9,
label: "Email Address",
required: true,
field: "readonly",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "这是一个只读输入框",
xl: 12,
},
{ type: "line", required: true, xl: 24 },
{ type: "title", title: "Current Residential Address", xl: 24 },
{
type: "radio",
label: "",
required: false,
field: "radioValue",
rules: [{ required: false, message: "单选 is required" }],
options: {
data: [
{ name: "Chinese address", code: "1" },
{ name: "English address ", code: "0" },
],
},
xl: 24,
},
{
type: "input",
maxlength: 9,
label: "Flat",
required: true,
field: "addressFlat",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter flat",
xl: 24,
},
{
type: "input",
maxlength: 9,
label: "Floor",
required: true,
field: "addressFloor",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter floor",
xl: 24,
},
{
type: "input",
maxlength: 9,
label: "Block",
required: true,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
style: "width:33%;padding-right: 0px;",
placeholder: "Please enter Block",
xl: 24,
},
{
type: "input",
maxlength: 9,
label: "Building",
required: true,
field: "addressBuild",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter floor",
xl: 12,
},
{
type: "input",
maxlength: 9,
label: "Estate",
required: true,
field: "addressBlock",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter Block",
xl: 12,
},
{
type: "input",
maxlength: 9,
label: "Street Number and Street Name",
required: true,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter floor",
xl: 12,
},
{
type: "select",
label: "District/ Region",
required: true,
disabled: false,
field: "Region",
placeholder: "Please select country of birth",
rules: [{ required: false, message: "下拉 is required" }],
options: {
data: [
{ name: "1", code: "1" },
{ name: "2", code: "2" },
{ name: "3", code: "3" },
],
},
xl: 12,
},
{
type: "select",
label: "Area",
required: true,
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "Region",
placeholder: "Please select country of birth",
options: {
data: [
{ name: "1", code: "1" },
{ name: "2", code: "2" },
{ name: "3", code: "3" },
],
},
xl: 8,
},
{
type: "select",
label: "City",
required: true,
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "Region",
placeholder: "Please select country of birth",
options: {
data: [
{ name: "1", code: "1" },
{ name: "2", code: "2" },
{ name: "3", code: "3" },
],
},
xl: 8,
},
{
type: "select",
label: "Country or Territory",
required: true,
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "Region",
placeholder: "Please select country of birth",
options: {
data: [
{ name: "1", code: "1" },
{ name: "2", code: "2" },
{ name: "3", code: "3" },
],
},
xl: 8,
},
{
type: "select",
label: "Country or Territory",
required: true,
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "Region",
placeholder: "Please select country of birth",
options: {
data: [
{ name: "1", code: "1" },
{ name: "2", code: "2" },
{ name: "3", code: "3" },
],
},
xl: 24,
},
{ type: "line", style: "width: 100%;", xl: 24 },
// {
// type: "slotItem",
// label: "插槽例2",
// field: "value2",
// slotItemName: "slotItemName2",
// required: true,
// rules: [{ required: false, message: "slotItemName is required" }],
// xl: 8,
// },
{
type: "select",
label: "Occupation Status",
required: false,
disabled: false,
rules: [{ required: false, message: "下拉 is required" }],
field: "Region",
placeholder: "Please select country of birth",
options: {
data: [
{ name: "1", code: "1" },
{ name: "2", code: "2" },
{ name: "3", code: "3" },
],
},
xl: 12,
},
{
type: "input",
maxlength: 9,
label: "Nature of Business",
required: false,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter floor",
xl: 12,
},
{
type: "input",
maxlength: 9,
label: "Nature of Business",
required: false,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter floor",
xl: 12,
},
{
type: "input",
maxlength: 9,
label: "Nature of Business",
required: false,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
placeholder: "Please enter floor",
xl: 12,
},
{
type: "textarea",
label: "Other occupation/title",
required: false,
maxlength: 200,
showWordLimit: true,
field: "Gender",
rules: [{ required: false, message: "只读 is required" }],
rows: 2,
autosize: { minRows: 5, maxRows: 6 },
placeholder: "Please enter floor",
xl: 24,
},
{ type: "line", style: "width: 100%;", xl: 24 },
]);
// 配置项
const options = reactive<Form.Options>({
labelPosition: "top", //表单标签位置
isDisabled: false,
btnConfig: [
//表单按钮配置
{
isShow: true,
name: "Create",
emitName: "create",
btnCode: "11111",
size: "90px",
isRule: false,
style: "margin-right: 30px",
debounced: true,
},
{
isShow: true,
name: "上一步",
emitName: "last",
size: "90px",
btnCode: "11111",
isRule: true,
// style: 'margin-right: 30px'
},
{
isShow: true,
name: "重置",
emitName: "reset",
size: "90px",
btnCode: "11111",
isRule: false,
style: "margin-right: 30px",
},
{
isShow: true,
plain: "",
name: "确认",
emitName: "nextttt",
btnCode: "001",
size: 15,
primary: "primary",
info: "",
text: "",
link: "",
loading: true,
width: "100px",
height: "50px",
circle: "circle",
color: "#3333",
bgColor: "#6666",
borderColor: "#336699",
borderStyle: "solid",
borderWidth: "1px",
fontSize: "16px",
fontWeight: 500,
class: "custom-class",
loadingColor: "#FFFFFF",
icon: "",
isRule: true,
style: "width: 700px;",
},
// {
// isShow: true,
// name: '下一步',
// emitName: 'next',
// btnCode: '11111',
// size: '90px',
// isRule: false,
// style: 'margin-right: 30px'
// },
],
});
const model = ref<Record<string, any>>({
// 地址项字段
testSlotValue: '',
addressBlock: "1",
addressBuild: "ww",
addressCity: "wd",
addressFlat: "d",
addressFloor: "d",
addressHouse: "d",
addressLaguage: "d",
addressNation: "d",
addressNo: "d",
addressRegion: "d",
addressStreet: "dqqqq",
addressSubregion: "d",
addressType: "",
//
systemLaguage: "",
value1: "",
addressMansion: "",
block: "",
floor: "",
flat: "",
addressLang: "1",
addressArea: "",
addressAreaC: "",
datedd: "",
// 姓名项字段
nameEnFamily: "",
// nameEn: '',
// nameChFamily: '',
// nameCh: '',
// 单选字段
radioValue: "",
// 性别字段
gender: 1,
// 多选字段
hobbies: [1],
// 下拉字段
Nationality: "",
jobe: "",
// 密码字段
password: "",
// 只读字段
readonly: "只读输入框",
// 日期字段
// date: new Date(2000, 1, 1, 12, 0, 0),
date: "",
// 留言板字段
summary: "",
// 地址插槽字段
addressRadioV: "2q",
// 手机输入字段
areaCode: "+998",
phoneNumber: "",
// value2
value2: "",
});
/**
* 注意： model数据模型非必填项，如果仅仅是用于数据收集，model参数可以不用填，表单的submit事件会返回所有搜集的数据对象
* 如果是编辑的情况下，页面需要回显数据，则model数据模型必须要填写
*/
const handleBaseSubmit = (model: Record<string, any>, code: any) => {
console.log("handleBaseSubmit", model, code);
};
const handleLastClick = (model: Record<string, any>, code: any) => {
console.log("handleLastClick", model, code);
};
const cancelClick = (model: Record<string, any>, code: any) => {
console.log("cancleClick", model, code);
};
const handleBaseNext = (model: Record<string, any>, code: any) => {
console.log("handleBaseNextClick", model, "fff", code, "ff");
};
const selectChange = (code: any, field: any) => {
console.log("ssssssss", code, field);
};
const radioChange = (code: any, field: any) => {
console.log("radioChange", code, field);
};
const checkChange = (code: any, field: any) => {
console.log("checkChange", code, field);
};
const dateChange = (date: string, field: string) => {
console.log("dateChange", date, field);
};
const inputBlur = (val: string, field: string) => {
console.log("inputBlur", val, field);
};
</script>
<style lang="scss" scoped></style>
<!-- 表单域名配置列表示例 -->
<script>
// 自定义验证邮箱方法
const checkEmail = (rule: any, value: any, callback: any) => {
if (!value) callback(new Error('Please input the email'))
const regExp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(com|cn|net)$/
regExp.test(value) ? callback() : callback(new Error('Please input the correct email address'))
}
// 表单配置示例
export const exampleForm = {
// 基本全部表单项配置示例
baseForExample: [
// 标题项
{ title: '标题内容', type: 'title', },
// 姓名项
{
label: '姓名项',
type: 'name',
required: true,
disabled: false,
field: {
nameEnFamily: 'nameEnFamily',
nameEn: 'nameEn',
nameChFamily: 'nameChFamily',
nameCh: 'nameCh'
},
rules: {
nameEnFamily: [{ required: true, message: '11 is required' }],
nameEn: [{ required: true, message: '22 is required' }],
nameChFamily: [{ required: true, message: '33 is required' }],
nameCh: [{ required: true, message: '44 is required' }],
},
placeholderNameChFamily: '請輸入中文姓',
placeholderNameEnFamily: '請輸入英文姓',
placeholderNameEn: '請輸入英文名',
placeholderNameCh: '請輸入中文名',
},
// 单选项
{
type: 'radio',
label: '单选项',
required: true,
disabled: false,
field: 'radioValue',
rules: [{ required: true, message: '单选 is required' }],
style: 'width: 100%',
options: { data: [{ name: 'Chinese address', code: 1 }, { name: 'English address ', code: 0 }] }
},
// 单选项(带后缀说明)
{
type: 'radioNote',
label: '单选(带后缀说明)',
required: true,
disabled: false,
field: 'radioValue',
labelBefore: 'Preferred Appointment Notification Channel',
labelNode: ' (Note: The notifications will be sent to the first contact number you entered.)',
style: 'width: 100%',
rules: [{ required: true, message: '单选 is required' }],
options: { data: [{ name: 'SMS', code: 1 }, { name: 'Email', code: 0 }] }
},
// 性别项
{
type: 'gender',
label: '性别',
required: true,
disabled: false,
field: 'gender',
style: 'width: 100%',
rules: [{ required: true, message: '性别 is required' }],
options: { data: [{ name: '男', code: "F" }, { name: '女', code: "M" }] }
},
// 多选项
{
type: 'checkbox',
label: '多选项',
required: true,
disabled: false,
field: 'hobbies',
style: 'width: 100%',
rules: [{ required: true, message: '多选 is required' }],
ways: 'column', //column or row
options: { data: [{ name: 'Cantonese', code: 1 }, { name: 'Mandarin', code: 2 }, { name: 'English', code: 3 }] }
},
// 多选样式单选
{
type: "checkboxRadio",
label: "多选样式单选 ",
required: true,
field: "Preferred",
rules: [{ required: true, message: "多选 is required" }],
ways: "row", //column or row
options: {
data: [
{ name: "Cantonese", code: '0' },
{ name: "Mandarin", code: '2' },
{ name: "English", code: '3' },
],
},
},
// 下拉项
{
type: 'select',
label: '下拉项',
required: true,
disabled: false,
field: 'Region',
placeholder: 'Please select country of birth',
style: 'width:49%;padding-right: 0px;',//一行两个右边项的样式
rules: [{ required: true, message: '下拉 is required' }],
options: { data: [{ name: '1', code: 1 }, { name: '2', code: 2 }, { name: '3', code: 3 }] }
},
// 密码项
{
type: 'input',
label: '密码',
required: true,
disabled: false,
field: 'password',
prepend: 'prepend',
append: 'hdk',
style: 'width:49%;padding-right: 0px;',//一行两个右边项的样式
placeholder: '这是一个密码输入框',
showPassword: true,
rules: [{ required: true, message: '密码 is required' }],
},
// 只读项
{
type: 'input',
label: '只读',
required: true,
disabled: false,
field: 'readonly',
rules: [{ required: true, message: '只读 is required' }],
readonly: true,
placeholder: '这是一个只读输入框'
},
// 日期项
{
type: 'date',
label: '日期',
required: true,
disabled: false,
field: 'date',
rules: [{ required: true, message: '日期 is required' }],
style: 'width:51%;padding-right: 20px;',//一行两个左边项的样式
placeholder: 'DD/MM/YYYY',
disabledDate: (val: Date) => {
return val.getTime() > new Date().getTime()
},
},
// 日期选择项
{
type: "date",
label: "Date of Birth",
required: true,
field: "datedd",
rules: [{ required: false, message: "日期 is required" }],
placeholder: "DD/MM/YYYY",
xs:12,
sm:12,
md:12,
lg:12,
xl: 12,
showTo: 'to'
},
{
type: "date",
label: "Date of Birth",
required: true,
field: "datedd",
rules: [{ required: false, message: "日期 is required" }],
placeholder: "DD/MM/YYYY",
xs:12,
sm:12,
md:12,
lg:12,
xl: 12,
},
{
type: 'daterange',
label: '日期选择',
required: true,
disabled: false,
field: 'dateRange',
rules: [{ required: true, message: '日期 is required' }],
startPlaceholder: '请选择开始日期',
endPlaceholder: '请选择结束日期'
},
// 文本框项
{
type: 'textarea',
label: '文本框',
required: true,
disabled: false,
// rows: 5,
autosize:{
minRows: 2, maxRows: 6
}
rules: [{ required: true, message: '文本框 is required' }],
field: 'summary',
placeholder: '文本框'
},
// 手机号码项
{
type: 'phone',
label: '手机号码',
required: true,
disabled: false,
field: {
areaCode: 'areaCode',
phoneNumber: 'phoneNumber'
},
style: 'width:33.5%;padding-right: 20px;',
placeholder: '请输入手机号码',
rules: {
phoneNumber: [{ required: true, message: 'phoneNumber1 is required' }],
},
options: { placeholder: '', data: [{ name: '+852', code: 1 }, { name: '+654', code: 2 }, { name: '+765', code: 3 }] }
},
// LINE 横向线
{
type: 'line',
style: 'width: 100%;',
},
// 插槽项
{
type: "slotItem",
label: "插槽例1",
field: "value1",
slotItemName: 'slotItemName1',
required: true,
rules: [{ required: true, message: "slotItemName is required" }],
},
],
// 其他示例
customkeyForm: [
{ label: '标题', field: 'name' },
{ label: '性别', field: 'gender', type: 'radio', options: { labelkey: 'title', valueKey: 'val', data: [{ title: '男', val: 1 }, { title: '女', val: 0 }] } }
],
// 带自定义校验
ruleForm: [
{ label: '姓名', field: 'name', rules: [{ required: true, message: 'name is required' }] },
{ label: '邮箱', field: 'email', rules: [{ required: true, validator: checkEmail }] }
]
} as Record<string, Form.FieldItem[]>
</script>