diff --git a/packages/radio/src/radio-button.vue b/packages/radio/src/radio-button.vue index 37de62b0f5..06144260fb 100644 --- a/packages/radio/src/radio-button.vue +++ b/packages/radio/src/radio-button.vue @@ -42,13 +42,24 @@ export default { name: 'ElRadioButton', props: { - label: {}, + label: { + type: [Boolean, String, Number], + default: '', + }, disabled: Boolean, - name: String, + name: { + type: String, + default: '', + }, }, - setup(props, ctx) { - const { isGroup, _radioGroup, elForm, - ELEMENT, focus, _elFormItemSize } = useRadio() + setup(props) { + const radioUse = useRadio() + const isGroup = radioUse.isGroup + const _radioGroup = radioUse._radioGroup + const _elFormItemSize = radioUse._elFormItemSize + const ELEMENT = radioUse.ELEMENT + const focus = radioUse.focus + const elForm = radioUse.elForm const size = computed(() => { return _radioGroup.radioGroupSize || _elFormItemSize || (ELEMENT || {} as any).size }) diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue index 54a25d3148..dba5339f60 100644 --- a/packages/radio/src/radio-group.vue +++ b/packages/radio/src/radio-group.vue @@ -13,16 +13,12 @@ import { nextTick, computed, - provide, getCurrentInstance, onMounted, inject, + provide, + getCurrentInstance, + onMounted, + inject, } from 'vue' - -const keyCode = Object.freeze({ - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40, -}) - +import { eventKeys } from '@element-plus/utils/aria' export default { name: 'ElRadioGroup', @@ -30,10 +26,22 @@ export default { componentName: 'ElRadioGroup', props: { - modelValue: {}, - size: String, - fill: String, - textColor: String, + modelValue: { + type: [Boolean, String, Number], + default: '', + }, + size: { + type: String, + default: '', + }, + fill: { + type: String, + default: '', + }, + textColor: { + type: String, + default: '', + }, disabled: Boolean, }, @@ -75,7 +83,9 @@ export default { name: 'ElRadioGroup', changeEvent: changeEvent, radioGroupSize: radioGroupSize, - ...props, + fill: props.fill, + textColor: props.textColor, + disabled: props.disabled, modelValue, }) @@ -88,14 +98,14 @@ export default { const roleRadios = instance.vnode.el.querySelectorAll('[role=radio]') let nextIndex = null switch (e.keyCode) { - case keyCode.LEFT: - case keyCode.UP: + case eventKeys.left: + case eventKeys.up: e.stopPropagation() e.preventDefault() nextIndex = index === 0 ? length - 1 : index - 1 break - case keyCode.RIGHT: - case keyCode.DOWN: + case eventKeys.right: + case eventKeys.down: e.stopPropagation() e.preventDefault() nextIndex = (index === (length - 1)) ? 0 : index + 1 diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue index 8fefed9871..ee6271b24a 100644 --- a/packages/radio/src/radio.vue +++ b/packages/radio/src/radio.vue @@ -38,8 +38,9 @@ > - - + + {{ label }} + @@ -53,19 +54,36 @@ export default defineComponent({ componentName: 'ElRadio', props: { - modelValue: {}, - label: {}, + modelValue: { + type: [Boolean, String, Number], + default: '', + }, + label: { + type: [Boolean, String, Number], + default: '', + }, disabled: Boolean, - name: String, + name: { + type: String, + default: '', + }, border: Boolean, - size: String, + size: { + type: String, + default: '', + }, }, emits: ['update:modelValue', 'change'], setup(props, ctx) { - const { isGroup, _radioGroup, - _elFormItemSize, ELEMENT, focus, elForm } = useRadio() + const radioUse = useRadio() + const isGroup = radioUse.isGroup + const _radioGroup = radioUse._radioGroup + const _elFormItemSize = radioUse._elFormItemSize + const ELEMENT = radioUse.ELEMENT + const focus = radioUse.focus + const elForm = radioUse.elForm const instance = getCurrentInstance() const model = computed({ get() {