Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: demo page
Browse files Browse the repository at this point in the history
mynetfan committed Jan 9, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 8310e49 commit dc7878f
Showing 2 changed files with 18 additions and 13 deletions.
11 changes: 7 additions & 4 deletions playground/src/views/examples/form/custom.vue
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ const [Form] = useVbenForm({
},
labelClass: 'w-2/6',
},
fieldMappingTime: [['field4', ['areaCode', 'phone'], null]],
fieldMappingTime: [['field4', ['phoneType', 'phoneNumber'], null]],
// 提交函数
handleSubmit: onSubmit,
// 垂直布局,label和input在不同行,值为vertical
@@ -56,16 +56,19 @@ const [Form] = useVbenForm({
},
{
component: markRaw(TwoFields),
defaultValue: [undefined, '188'],
defaultValue: [undefined, ''],
disabledOnChangeListener: false,
fieldName: 'field4',
formItemClass: 'col-span-1',
label: '组合字段',
rules: z
.array(z.string().optional())
.length(2, '请输入手机号码')
.length(2, '请选择类型并输入手机号码')
.refine((v) => !!v[0], {
message: '请选择区号',
message: '请选择类型',
})
.refine((v) => !!v[1] && v[1] !== '', {
message: '       输入手机号码',
})
.refine((v) => v[1]?.match(/^1[3-9]\d{9}$/), {
// 使用全角空格占位,将错误提示文字挤到手机号码输入框的下面
20 changes: 11 additions & 9 deletions playground/src/views/examples/form/modules/two-fields.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script lang="ts" setup>
import { Input, Select } from 'ant-design-vue';
const emit = defineEmits(['blur', 'change', 'change']);
const emit = defineEmits(['blur', 'change']);
const modelValue = defineModel<[string, string]>({
default: ['+85', ''],
default: () => [undefined, undefined],
});
function onChange() {
@@ -16,19 +16,21 @@ function onChange() {
<Select
v-model:value="modelValue[0]"
class="w-[80px]"
show-search
placeholder="区码"
placeholder="类型"
allow-clear
:class="{ 'valid-success': !!modelValue[0] }"
:options="[
{ label: '个人', value: 'personal' },
{ label: '工作', value: 'work' },
{ label: '私密', value: 'private' },
]"
@blur="emit('blur')"
@change="onChange"
>
<Select.Option value="+82">+82</Select.Option>
<Select.Option value="+85">+85</Select.Option>
<Select.Option value="+86">+86</Select.Option>
</Select>
/>
<Input
placeholder="请输入11位手机号码"
class="flex-1"
allow-clear
:class="{ 'valid-success': modelValue[1]?.match(/^1[3-9]\d{9}$/) }"
v-model:value="modelValue[1]"
:maxlength="11"

0 comments on commit dc7878f

Please sign in to comment.