112 lines
2.8 KiB
Vue
112 lines
2.8 KiB
Vue
<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() {
|
||
return (this.$vnode.data || {}).tag || 'div';
|
||
},
|
||
radioGroupSize() {
|
||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.$on('handleChange', value => {
|
||
this.$emit('change', value);
|
||
});
|
||
},
|
||
mounted() {
|
||
// 当radioGroup没有默认选项时，第一个可以选中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) { // 左右上下按键 可以在radio组内切换不同选项
|
||
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>
|
||
|