hooks

2026-01-291 min read未分类

v-ui-pro

useComponentRef

import {ref} from "vue";

/**
 * 组件类型标注
 * @param _component 组件实例
 * @returns 完整类型标注的响应式组件实例
 */
export const useComponentRef = <T extends abstract new (...args: any) => any>(
    _component: T
) => {
    return ref<InstanceType<T>>();
};

useFormModel

import {FormSearchProps} from "../components/v-ui-pro";
import {Form} from "@arco-design/web-vue";
import {useComponentRef} from "./useComponentRef.ts";
import {ref, watch} from "vue";

export function useFormModel(props: FormSearchProps, emit: any) {

    const formRef = useComponentRef(Form)

    const {modelValue, loading, formItemAttributes} = props;

    console.log(`解构modelValue:${JSON.stringify(modelValue)}`)
    formItemAttributes.forEach(item => {
        // 没有这个 key
        if (!Object.keys(modelValue).includes(item.field)) {
            modelValue[item.field] = item.defaultValue ?? null
        } else {
            modelValue[item.field] = item.defaultValue ?? null
        }
    })

    const model = ref(modelValue);

    watch(() =>
            model.value,
        (newVal) => {
            emit('update:modelValue', newVal)
        },
        {deep: true, immediate: false}
    )

    console.log(`绑定属性modelValue:${JSON.stringify(model.value)}`)
    return {model, loading, formItemAttributes, formRef}

}