123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <template>
- <label
- class="el-radio-button"
- :class="[
- size ? 'el-radio-button--' + size : '',
- { 'is-active': value === label },
- { 'is-disabled': isDisabled },
- { 'is-focus': focus }
- ]"
- role="radio"
- :aria-checked="value === label"
- :aria-disabled="isDisabled"
- :tabindex="tabIndex"
- @keydown.space.stop.prevent="value = isDisabled ? value : label"
- >
- <input
- class="el-radio-button__orig-radio"
- :value="label"
- type="radio"
- v-model="value"
- :name="name"
- @change="handleChange"
- :disabled="isDisabled"
- tabindex="-1"
- @focus="focus = true"
- @blur="focus = false"
- autocomplete="off"
- >
- <span
- class="el-radio-button__inner"
- :style="value === label ? activeStyle : null"
- @keydown.stop>
- <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],
- inject: {
- elForm: {
- default: ''
- },
- elFormItem: {
- default: ''
- }
- },
- props: {
- label: {},
- disabled: Boolean,
- name: String
- },
- data() {
- return {
- focus: false
- };
- },
- 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 || ''
- };
- },
- _elFormItemSize() {
- return (this.elFormItem || {}).elFormItemSize;
- },
- size() {
- return this._radioGroup.radioGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
- },
- isDisabled() {
- return this.disabled || this._radioGroup.disabled || (this.elForm || {}).disabled;
- },
- tabIndex() {
- return (this.isDisabled || (this._radioGroup && this.value !== this.label)) ? -1 : 0;
- }
- },
- methods: {
- handleChange() {
- this.$nextTick(() => {
- this.dispatch('ElRadioGroup', 'handleChange', this.value);
- });
- }
- }
- };
- </script>
|