Browse Source

fix: 修复RadioButtonGroup组件返回值不正确的bug

pull/768/head
cKey 3 years ago
parent
commit
4fee587fd9
  1. 13
      apps/vue/src/components/Form/src/components/RadioButtonGroup.vue

13
apps/vue/src/components/Form/src/components/RadioButtonGroup.vue

@ -4,14 +4,14 @@
<template>
<RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
<template v-for="item in getOptions" :key="`${item.value}`">
<RadioButton :value="item.value" :disabled="item.disabled">
<RadioButton :value="item.value" :disabled="item.disabled" @click="handleClick(item)">
{{ item.label }}
</RadioButton>
</template>
</RadioGroup>
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
import { defineComponent, PropType, computed, ref } from 'vue';
import { Radio } from 'ant-design-vue';
import { isString } from '/@/utils/is';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
@ -22,6 +22,7 @@
export default defineComponent({
name: 'RadioButtonGroup',
emits: ['change'],
components: {
RadioGroup: Radio.Group,
RadioButton: Radio.Button,
@ -37,8 +38,9 @@
},
setup(props) {
const attrs = useAttrs();
const emitData = ref<any[]>([]);
// Embedded in the form, just use the hook binding to perform form verification
const [state] = useRuleFormItem(props);
const [state] = useRuleFormItem(props, 'value', 'change', emitData);
// Processing options value
const getOptions = computed((): OptionsItem[] => {
@ -51,7 +53,10 @@
return options.map((item) => ({ label: item, value: item })) as OptionsItem[];
});
return { state, getOptions, attrs };
function handleClick(...args) {
emitData.value = args;
}
return { state, getOptions, attrs, handleClick };
},
});
</script>

Loading…
Cancel
Save