feat: 更新 PSelect 组件,添加 value 插槽支持,优化选项加载和输入交互体验
All checks were successful
/ test (push) Successful in 27s
/ surge (push) Successful in 37s

This commit is contained in:
严浩
2024-12-06 16:21:41 +08:00
parent c4afb0342e
commit 9b78830313
3 changed files with 28 additions and 5 deletions

View File

@ -4,7 +4,7 @@ import AllCustom from './all-custom/all-custom.vue';
import TutorialForm from './tutorial-form/index.vue';
import ZodForm from './zod-form/index.vue';
const selectedCity = ref();
const selectedCity = ref('NY');
const loading = ref(false);
const cities = ref([
{ name: 'New York', code: 'NY' },
@ -53,6 +53,12 @@ const handleE = (eventName: string) => {
@change="(e) => handleE('change')(e)"
@blur="(e) => handleE('blur')(e)"
></Select>
<Select
:options="cities"
class="w-full md:w-56"
>
<template #value="slotProps">{{ slotProps.value }}</template>
</Select>
<Button
id="load-selected-city"
label="Load Selected City"

View File

@ -1,8 +1,8 @@
import type { FormKitFrameworkContext, FormKitTypeDefinition } from '@formkit/core';
import type { FormKitInputs } from '@formkit/inputs';
import { createSection, label, outer } from '@formkit/inputs';
import PrimevueSelect, { type SelectEmitsOptions } from 'primevue/select';
import { defineComponent, markRaw, ref } from 'vue';
import PrimevueSelect, { type SelectEmitsOptions, type SelectSlots } from 'primevue/select';
import { computed, defineComponent, markRaw, ref } from 'vue';
import { floatLabel } from '../sections/floatLabel';
import { messages } from '../sections/messages';
@ -18,6 +18,7 @@ type PrimevueSelectListeners = {
const PSelectComp = defineComponent(
(vueProps: { context: FormKitFrameworkContext }) => {
const formkitContext = vueProps.context;
const primevueSelectInstance = ref<Record<string, any> | undefined>();
const listeners: PrimevueSelectListeners = {
'onUpdate:modelValue': (value: any) => {
formkitContext.node.input(value);
@ -56,12 +57,23 @@ const PSelectComp = defineComponent(
loadOptions(); // 立即加载options
const valueSlot = computed(() => {
if (primevueSelectInstance.value?.label === 'p-emptylabel' && !!formkitContext._value) {
return (slotProps => {
return slotProps.value as never;
}) satisfies SelectSlots['value'];
} else {
return undefined;
}
});
return () => {
return (
<PrimevueSelect
ref={primevueSelectInstance}
labelId={formkitContext.id}
fluid
invalid={formkitContext.state.invalid}
invalid={formkitContext.state.invalid || valueSlot.value !== undefined}
disabled={!!formkitContext.disabled}
loading={loading.value}
options={poptions.value}
@ -69,7 +81,11 @@ const PSelectComp = defineComponent(
optionLabel={formkitContext.optionLabel as never}
optionValue={formkitContext.optionValue as never}
{...listeners}
/>
>
{{
value: valueSlot.value,
}}
</PrimevueSelect>
);
};
},

View File

@ -87,6 +87,7 @@ const promiseOptions = new Promise<typeof K_OPTIONS>(resolve => {
:options="K_OPTIONS"
optionLabel="label"
optionValue="value"
value="数据的值不在options里"
/>
<FormKit
type="PSelect"