This commit is contained in:
62
src/App.vue
62
src/App.vue
@ -15,46 +15,38 @@ const castNumber = (node: FormKitNode) => {
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
const agreeNode = getNode('agreeNodeId')
|
||||
Object.assign(window, { agreeNode })
|
||||
console.debug('[onMounted]', `agreeNode :>> `, agreeNode);
|
||||
|
||||
const nameNode = agreeNode?.context?.node.at('attributes.name')
|
||||
const nameNode = getNode('nameNodeId')
|
||||
Object.assign(window, { nameNode })
|
||||
console.debug('[onMounted]', `nameNode :>> `, nameNode);
|
||||
agreeNode!.on('commit', ({ payload }) => {
|
||||
console.debug('[agreeNode] [on commit]', `payload :>> `, payload);
|
||||
let newValue = (nameNode?.value as string)?.replace(' 👍', '')?.replace(' 👎', '')
|
||||
nameNode!.input(`${newValue} ${payload ? '👍' : '👎'}`)
|
||||
|
||||
const schemaGroupInput = nameNode!.root.at('schemaGroup.input')
|
||||
console.debug('[onMounted]', `schemaGroupInput :>> `, schemaGroupInput);
|
||||
nameNode!.on('commit', ({ payload }) => {
|
||||
console.debug('[nameNode] [on commit]', `payload :>> `, payload);
|
||||
schemaGroupInput!.input(`姓名:${payload}`)
|
||||
})
|
||||
})
|
||||
|
||||
const addressSchema: FormKitSchemaDefinition = [
|
||||
const SCHEMA: FormKitSchemaDefinition = [
|
||||
{
|
||||
$el: 'h1',
|
||||
children: 'JSON Schema Form',
|
||||
attrs: {
|
||||
class: 'font-bold text-2xl mb-4',
|
||||
'data-foo': 'bar',
|
||||
},
|
||||
},
|
||||
{
|
||||
$formkit: 'group',
|
||||
name: 'address',
|
||||
name: 'schemaGroup',
|
||||
children: [
|
||||
{
|
||||
$formkit: 'text',
|
||||
name: 'street',
|
||||
label: '街道地址',
|
||||
label: 'JSON Schema’ed Input',
|
||||
name: 'input',
|
||||
validation: 'required',
|
||||
validationLabel: '街道地址'
|
||||
},
|
||||
{
|
||||
$formkit: 'text',
|
||||
name: 'city',
|
||||
label: '城市',
|
||||
validation: 'required',
|
||||
validationLabel: '城市'
|
||||
},
|
||||
{
|
||||
$formkit: 'text',
|
||||
name: 'zipCode',
|
||||
label: '邮政编码',
|
||||
validation: 'required|number|length:6',
|
||||
validationLabel: '邮政编码',
|
||||
errors: ['显式错误'] // 显式设置的错误是非阻塞的,这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。
|
||||
// :errors="errors"
|
||||
validationLabel: 'input字段',
|
||||
errors: ['显式设置的错误是非阻塞的,这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。']
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -94,15 +86,10 @@ const addressSchema: FormKitSchemaDefinition = [
|
||||
<FormKit
|
||||
type="text"
|
||||
name="name"
|
||||
id="nameNodeId"
|
||||
label="姓名"
|
||||
help="别人都叫你什么?"
|
||||
/>
|
||||
<div
|
||||
v-if="!((value?.attributes as any)?.name)?.includes('测试')"
|
||||
class="text-red-500 mb-4 p-2 border border-red-500 rounded"
|
||||
>
|
||||
输入的姓名必须包含 '测试' 字符串。
|
||||
</div>
|
||||
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
@ -151,13 +138,12 @@ const addressSchema: FormKitSchemaDefinition = [
|
||||
</div>
|
||||
|
||||
<div class="character-attributes">
|
||||
<FormKitSchema :schema="addressSchema" />
|
||||
<FormKitSchema :schema="SCHEMA" />
|
||||
</div>
|
||||
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
name="agree"
|
||||
id="agreeNodeId"
|
||||
label="我同意FormKit是最好的表单开发框架。"
|
||||
class="mb-4"
|
||||
/>
|
||||
|
Reference in New Issue
Block a user