>>>> 创建类型安全的 FormItem 组件
- type SafeNFormItemProps & string> = {
- label?: string;
+ type SafeNFormItemProps
& string> = FormItemProps & {
path: P;
- placeholder?: string;
};
type SafeNFormItemDefaultSlot
& string> = {
value: Get;
+ setValue: (val: Get) => void;
};
const SafeNFormItemImpl = defineComponent<
@@ -66,18 +68,25 @@ export function useSafeNForm = Record(
(props, ctx) => {
return () => {
- // const value = get(formValue.value, props.path) as Get;
- const value = computed({
- get() {
- return get(formValue.value, props.path) as Get;
- },
- set(v) {
- set(formValue.value, props.path, v);
- },
+ const value = get(formValue.value, props.path);
+ function setValue(val: typeof value) {
+ set(formValue.value, props.path, val);
+ }
+
+ const defaultSlotContent = ctx.slots.default?.({
+ value,
+ setValue,
});
+
+ // 如果没有提供默认 slot 内容,则渲染一个 NInput 作为默认输入组件
+ const renderDefaultNInput = defaultSlotContent?.some((v) => v.type !== Comment) ? null : (
+
+ );
+
return (
-
- {ctx.slots.default?.({ value: value.value })}
+
+ {defaultSlotContent}
+ {renderDefaultNInput}
);
};
@@ -85,7 +94,7 @@ export function useSafeNForm = Record