125 lines
2.8 KiB
Vue
125 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { FormKitNode } from '@formkit/core';
|
|
import { text, group } from '@formkit/inputs';
|
|
import Swal from 'sweetalert2';
|
|
|
|
async function submit(formData: Record<string, any>, formNode: FormKitNode) {
|
|
console.group('submit');
|
|
console.log('formData :>> ', formData);
|
|
console.log('formNode :>> ', formNode);
|
|
console.groupEnd();
|
|
|
|
await new Promise(r => setTimeout(r, 2000))
|
|
Swal.fire({
|
|
title: 'Submitted! 🎉',
|
|
icon: 'success',
|
|
showConfirmButton: false,
|
|
timer: 1500
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Fieldset
|
|
legend="表单"
|
|
toggleable
|
|
class="min-w-full"
|
|
pt:content:class="flex justify-center"
|
|
>
|
|
<!-- https://formkit.com/inputs/form#props-attributes -->
|
|
<FormKit
|
|
:value="{
|
|
a: '1', b: '2',
|
|
PInputText: 'PInputText default value from form',
|
|
notInForm: 'not in form',
|
|
}"
|
|
:config="{
|
|
classes: {
|
|
form: 'flex flex-col w-full py-6 gap-8',
|
|
outer: 'flex flex-col gap-2',
|
|
/* label: 'font-medium block' */
|
|
},
|
|
}"
|
|
type="form"
|
|
#default="{ value }"
|
|
@submit="submit"
|
|
submit-label="提交 ✨"
|
|
:submit-attrs="{
|
|
'some-submit-attr': 'value',
|
|
}"
|
|
>
|
|
<FormKit
|
|
type="PInputText"
|
|
name="PInputText"
|
|
label="输入框"
|
|
value="`default value from field`"
|
|
some="prop"
|
|
some-boolean-prop
|
|
validation="required"
|
|
>
|
|
</FormKit>
|
|
<FormKit
|
|
type="PInputPassword"
|
|
name="PInputPassword"
|
|
label="密码"
|
|
validation="required"
|
|
toggleMask
|
|
:feedback="false"
|
|
/>
|
|
<FormKit
|
|
v-if="!value?.PInputPassword"
|
|
:type="text"
|
|
:preserve="false"
|
|
name="customType"
|
|
value="this input will display if the password is empty"
|
|
>
|
|
<!-- <template #label>
|
|
<div>labelll</div>
|
|
</template> -->
|
|
</FormKit>
|
|
|
|
|
|
<FormKit
|
|
type="group"
|
|
name="group"
|
|
>
|
|
<FormKit
|
|
type="text"
|
|
name="text-in-group-1"
|
|
>
|
|
</FormKit>
|
|
</FormKit>
|
|
|
|
<FormKit
|
|
type="group"
|
|
name="group"
|
|
>
|
|
<FormKit
|
|
type="text"
|
|
name="text-in-group-2"
|
|
>
|
|
</FormKit>
|
|
</FormKit>
|
|
|
|
<Button
|
|
label="Button"
|
|
@click="() => {
|
|
value!.button = value!.button || {};
|
|
(value!.button as any).clicked = 'clicked';
|
|
(value!.group as any)['text-in-group-1'] = 'changed-by-button';
|
|
}"
|
|
/>
|
|
|
|
<pre class="font-mono text-sm p-4 bg-slate-100 dark:bg-gray-900 overflow-x-auto rounded-md shadow-inner dark:text-gray-300
|
|
">{{ value }}</pre>
|
|
<!-- <FormKitSummary /> -->
|
|
</FormKit>
|
|
</Fieldset>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.formkit-input) {
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
</style> |