feat: 添加动态列表功能,更新 FormKit 配置以支持列表和数字输入类型
All checks were successful
/ surge (push) Successful in 36s

This commit is contained in:
严浩
2024-11-18 16:17:57 +08:00
parent ed81701373
commit 84b602db3b
2 changed files with 69 additions and 6 deletions

View File

@ -13,7 +13,6 @@ const castNumber = (node: FormKitNode) => {
node.hook.input((value, next) => next(Number(value)))
}
onMounted(() => {
console.group('onMounted')
const nameNode = getNode('nameNodeId')
@ -65,7 +64,6 @@ const SCHEMA: FormKitSchemaDefinition = [
submit-label="提交 "
>
<div class="character-attributes">
<FormKit
type="group"
name="attributes"
@ -144,12 +142,63 @@ const SCHEMA: FormKitSchemaDefinition = [
<FormKitSchema :schema="SCHEMA" />
</div>
<div class="character-attributes">
<FormKit
type="list"
name="guests"
:value="[{}]"
dynamic
#default="{ items, node, value }"
>
<FormKit
type="group"
v-for="(item, index) in items"
:key="item"
:index="index"
>
<div class="list-group">
<FormKit
type="text"
name="name"
label="Guest name"
placeholder="Guest name"
/>
<FormKit
type="number"
name="age"
label="Guest age"
/>
<button
type="button"
@click="() => node.input(value!.filter((_, i) => i !== index))"
class="border border-blue-600 text-blue-600 p-3"
>
- Remove
</button>
</div>
</FormKit>
<button
type="button"
@click="() => node.input(value!.concat({}))"
class="border border-blue-600 text-blue-600 p-3 mb-4"
>
+ Add another
</button>
<pre wrap>{{ value }}</pre>
</FormKit>
</div>
<FormKit
type="checkbox"
name="agree"
label="我同意FormKit是最好的表单开发框架"
class="mb-4"
/>
<pre class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ value }}</pre>
</FormKit>
@ -178,4 +227,18 @@ ul.error-box {
ul.error-box p {
font-weight: 500;
}
.list-group {
position: relative;
padding: 10px;
border: 1px solid grey;
border-radius: 10px;
margin-bottom: 5px;
}
.list-group button {
position: absolute;
top: 10px;
right: 10px;
}
</style>