fix(api-select): ensure that the onchange function parameters are correct

This commit is contained in:
Vben 2021-06-24 23:51:14 +08:00
parent a2a75a097f
commit fa64fc8a62
2 changed files with 24 additions and 6 deletions

View File

@ -2,6 +2,7 @@
<Select <Select
@dropdownVisibleChange="handleFetch" @dropdownVisibleChange="handleFetch"
v-bind="attrs" v-bind="attrs"
@change="handleChange"
:options="getOptions" :options="getOptions"
v-model:value="state" v-model:value="state"
> >
@ -67,11 +68,12 @@
const options = ref<OptionsItem[]>([]); const options = ref<OptionsItem[]>([]);
const loading = ref(false); const loading = ref(false);
const isFirstLoad = ref(true); const isFirstLoad = ref(true);
const emitData = ref<any[]>([]);
const attrs = useAttrs(); const attrs = useAttrs();
const { t } = useI18n(); const { t } = useI18n();
// Embedded in the form, just use the hook binding to perform form verification // Embedded in the form, just use the hook binding to perform form verification
const [state] = useRuleFormItem(props); const [state] = useRuleFormItem(props, 'value', 'change', emitData);
const getOptions = computed(() => { const getOptions = computed(() => {
const { labelField, valueField, numberToString } = props; const { labelField, valueField, numberToString } = props;
@ -135,7 +137,11 @@
emit('options-change', unref(options)); emit('options-change', unref(options));
} }
return { state, attrs, getOptions, loading, t, handleFetch }; function handleChange(_, ...args) {
emitData.value = args;
}
return { state, attrs, getOptions, loading, t, handleFetch, handleChange };
}, },
}); });
</script> </script>

View File

@ -1,12 +1,22 @@
import type { UnwrapRef } from 'vue'; import type { UnwrapRef, Ref } from 'vue';
import { reactive, readonly, computed, getCurrentInstance, watchEffect } from 'vue'; import {
reactive,
readonly,
computed,
getCurrentInstance,
watchEffect,
unref,
nextTick,
toRaw,
} from 'vue';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
export function useRuleFormItem<T extends Recordable>( export function useRuleFormItem<T extends Recordable>(
props: T, props: T,
key: keyof T = 'value', key: keyof T = 'value',
changeEvent = 'change' changeEvent = 'change',
emitData?: Ref<any[]>
) { ) {
const instance = getCurrentInstance(); const instance = getCurrentInstance();
const emit = instance?.emit; const emit = instance?.emit;
@ -33,7 +43,9 @@ export function useRuleFormItem<T extends Recordable>(
if (isEqual(value, defaultState.value)) return; if (isEqual(value, defaultState.value)) return;
innerState.value = value as T[keyof T]; innerState.value = value as T[keyof T];
emit?.(changeEvent, value); nextTick(() => {
emit?.(changeEvent, value, ...(toRaw(unref(emitData)) || []));
});
}, },
}); });