feat: 添加动态列表功能,更新 FormKit 配置以支持列表和数字输入类型
All checks were successful
/ surge (push) Successful in 36s
All checks were successful
/ surge (push) Successful in 36s
This commit is contained in:
67
src/App.vue
67
src/App.vue
@ -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>
|
Reference in New Issue
Block a user