vue-vben-admin/src/hooks/component/useFormItem.ts

36 lines
837 B
TypeScript
Raw Normal View History

2020-12-25 01:09:44 +08:00
import type { UnwrapRef } from 'vue';
import { reactive, readonly, computed, getCurrentInstance } from 'vue';
import { isEqual } from 'lodash-es';
export function useRuleFormItem<T extends Indexable>(
props: T,
key: keyof T = 'value',
changeEvent = 'change'
) {
const instance = getCurrentInstance();
const emit = instance?.emit;
const innerState = reactive({
value: props[key],
});
const defaultState = readonly(innerState);
const setState = (val: UnwrapRef<T[keyof T]>) => {
innerState.value = val as T[keyof T];
};
const state = computed({
get() {
return innerState.value;
},
set(value) {
if (isEqual(value, defaultState.value)) return;
innerState.value = value as T[keyof T];
emit?.(changeEvent, value);
},
});
return [state, setState, defaultState];
}