mirror of https://github.com/ElemeFE/element
92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<template>
|
|
<label
|
|
class="el-radio-button"
|
|
:class="[
|
|
size ? 'el-radio-button--' + size : '',
|
|
{ 'is-active': value === label },
|
|
{ 'is-disabled': isDisabled }
|
|
]"
|
|
role="radio"
|
|
:aria-checked="value === label"
|
|
:aria-disabled="isDisabled"
|
|
:tabindex="tabIndex"
|
|
@keydown.space.stop.prevent="value = label"
|
|
>
|
|
<input
|
|
class="el-radio-button__orig-radio"
|
|
:value="label"
|
|
type="radio"
|
|
v-model="value"
|
|
:name="name"
|
|
@change="handleChange"
|
|
:disabled="isDisabled"
|
|
tabindex="-1"
|
|
>
|
|
<span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
|
|
<slot></slot>
|
|
<template v-if="!$slots.default">{{label}}</template>
|
|
</span>
|
|
</label>
|
|
</template>
|
|
<script>
|
|
import Emitter from 'element-ui/src/mixins/emitter';
|
|
|
|
export default {
|
|
name: 'ElRadioButton',
|
|
|
|
mixins: [Emitter],
|
|
|
|
props: {
|
|
label: {},
|
|
disabled: Boolean,
|
|
name: String
|
|
},
|
|
computed: {
|
|
value: {
|
|
get() {
|
|
return this._radioGroup.value;
|
|
},
|
|
set(value) {
|
|
this._radioGroup.$emit('input', value);
|
|
}
|
|
},
|
|
_radioGroup() {
|
|
let parent = this.$parent;
|
|
while (parent) {
|
|
if (parent.$options.componentName !== 'ElRadioGroup') {
|
|
parent = parent.$parent;
|
|
} else {
|
|
return parent;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
activeStyle() {
|
|
return {
|
|
backgroundColor: this._radioGroup.fill || '',
|
|
borderColor: this._radioGroup.fill || '',
|
|
boxShadow: this._radioGroup.fill ? `-1px 0 0 0 ${this._radioGroup.fill}` : '',
|
|
color: this._radioGroup.textColor || ''
|
|
};
|
|
},
|
|
size() {
|
|
return this._radioGroup.size;
|
|
},
|
|
isDisabled() {
|
|
return this.disabled || this._radioGroup.disabled;
|
|
},
|
|
tabIndex() {
|
|
return !this.isDisabled ? (this._radioGroup ? (this.value === this.label ? 0 : -1) : 0) : -1;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
handleChange() {
|
|
this.$nextTick(() => {
|
|
this.dispatch('ElRadioGroup', 'handleChange', this.value);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|