<template> <component :is="_elTag" class="el-radio-group" role="radiogroup" @keydown="handleKeydown" > <slot></slot> </component> </template> <script> import Emitter from 'element-ui/src/mixins/emitter'; const keyCode = Object.freeze({ LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 }); export default { name: 'ElRadioGroup', componentName: 'ElRadioGroup', inject: { elFormItem: { default: '' } }, mixins: [Emitter], props: { value: {}, size: String, fill: String, textColor: String, disabled: Boolean }, computed: { _elFormItemSize() { return (this.elFormItem || {}).elFormItemSize; }, _elTag() { let tag = (this.$vnode.data || {}).tag; if (!tag || tag === 'component') tag = 'div'; return tag; }, radioGroupSize() { return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size; } }, created() { this.$on('handleChange', value => { this.$emit('change', value); }); }, mounted() { // 褰搑adioGroup娌℃湁榛樿閫夐」鏃讹紝绗竴涓彲浠ラ€変腑Tab瀵艰埅 const radios = this.$el.querySelectorAll('[type=radio]'); const firstLabel = this.$el.querySelectorAll('[role=radio]')[0]; if (![].some.call(radios, radio => radio.checked) && firstLabel) { firstLabel.tabIndex = 0; } }, methods: { handleKeydown(e) { // 宸﹀彸涓婁笅鎸夐敭 鍙互鍦╮adio缁勫唴鍒囨崲涓嶅悓閫夐」 const target = e.target; const className = target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]'; const radios = this.$el.querySelectorAll(className); const length = radios.length; const index = [].indexOf.call(radios, target); const roleRadios = this.$el.querySelectorAll('[role=radio]'); switch (e.keyCode) { case keyCode.LEFT: case keyCode.UP: e.stopPropagation(); e.preventDefault(); if (index === 0) { roleRadios[length - 1].click(); roleRadios[length - 1].focus(); } else { roleRadios[index - 1].click(); roleRadios[index - 1].focus(); } break; case keyCode.RIGHT: case keyCode.DOWN: if (index === (length - 1)) { e.stopPropagation(); e.preventDefault(); roleRadios[0].click(); roleRadios[0].focus(); } else { roleRadios[index + 1].click(); roleRadios[index + 1].focus(); } break; default: break; } } }, watch: { value(value) { this.dispatch('ElFormItem', 'el.form.change', [this.value]); } } }; </script>