89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { FormKitNode } from '@formkit/core';
|
|
import { FormKitMessages } from '@formkit/vue'
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const listRef = ref<{ node: FormKitNode }>()
|
|
onMounted(() => {
|
|
const listNode = listRef.value?.node
|
|
console.debug(`listNode :>> `, listNode);
|
|
setTimeout(() => {
|
|
listNode;
|
|
}, 1000);
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<FormKit
|
|
ref="listRef"
|
|
type="list"
|
|
name="guests"
|
|
label="客人列表"
|
|
:value="[{}]"
|
|
dynamic
|
|
validation="required"
|
|
#default="{ items, node, value }"
|
|
>
|
|
<div
|
|
class="attributes-group"
|
|
v-auto-animate="{ duration: 500 }"
|
|
>
|
|
<FormKitMessages />
|
|
<FormKit
|
|
type="group"
|
|
v-for="(item, index) in items"
|
|
:key="item"
|
|
:index="index"
|
|
>
|
|
<div class="list-group-item">
|
|
<FormKit
|
|
type="text"
|
|
name="name"
|
|
label="客人姓名"
|
|
placeholder="客人姓名"
|
|
validation="required"
|
|
value="默认值"
|
|
>
|
|
</FormKit>
|
|
<FormKit
|
|
type="number"
|
|
name="age"
|
|
label="客人年龄"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="border border-blue-600 text-blue-600 p-3"
|
|
@click="() => node.remove(node.children[index])"
|
|
>
|
|
- 移除
|
|
</button>
|
|
</div>
|
|
</FormKit>
|
|
<button
|
|
type="button"
|
|
@click="() => node.input(value?.concat({}))"
|
|
class="border border-blue-600 text-blue-600 p-3 mb-4"
|
|
>
|
|
+ 添加另一个
|
|
</button>
|
|
<pre wrap>{{ value }}</pre>
|
|
|
|
</div>
|
|
</FormKit>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.list-group-item {
|
|
position: relative;
|
|
padding: 10px;
|
|
border: 1px solid grey;
|
|
border-radius: 10px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.list-group-item button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
</style> |