158 lines
3.7 KiB
Vue
158 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { FormKitNode } from '@formkit/core';
|
|
import { text } 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
|
|
})
|
|
}
|
|
|
|
const K_OPTIONS = [
|
|
{ label: 'Option 1', value: 'Value 1' },
|
|
{ label: 'Option 2', value: 'Value 2' },
|
|
{ label: 'Option 3', value: 'Value 3' },
|
|
];
|
|
const promiseOptions = () => {
|
|
return new Promise<typeof K_OPTIONS>(resolve => {
|
|
setTimeout(() => {
|
|
resolve(K_OPTIONS);
|
|
}, 1000);
|
|
});
|
|
};
|
|
</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
|
|
type="PSelect"
|
|
name="PSelect"
|
|
label="选择框"
|
|
validation="required"
|
|
:options="K_OPTIONS"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
/>
|
|
<FormKit
|
|
type="PSelect"
|
|
name="PSelect"
|
|
label="选择框"
|
|
validation="required"
|
|
:options="promiseOptions()"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
/>
|
|
<div class="flex gap-4">
|
|
<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>
|
|
</div>
|
|
|
|
<Button
|
|
label="Button"
|
|
@click="() => {
|
|
value!.button = value!.button || {};
|
|
(value!.button as any).clicked = 'clicked-这个值在@submit回调的formData里不会出现';
|
|
(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> |