|
|
|
@ -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> |
|
|
|
|