123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <template>
- <label
- class="el-radio"
- :class="[
- border && radioSize ? 'el-radio--' + radioSize : '',
- { 'is-disabled': isDisabled },
- { 'is-focus': focus },
- { 'is-bordered': border },
- { 'is-checked': model === label }
- ]"
- role="radio"
- :aria-checked="model === label"
- :aria-disabled="isDisabled"
- :tabindex="tabIndex"
- @keydown.space.stop.prevent="model = isDisabled ? model : label"
- >
- <span class="el-radio__input"
- :class="{
- 'is-disabled': isDisabled,
- 'is-checked': model === label
- }"
- >
- <span class="el-radio__inner"></span>
- <input
- ref="radio"
- class="el-radio__original"
- :value="label"
- type="radio"
- aria-hidden="true"
- v-model="model"
- @focus="focus = true"
- @blur="focus = false"
- @change="handleChange"
- :name="name"
- :disabled="isDisabled"
- tabindex="-1"
- autocomplete="off"
- >
- </span>
- <span class="el-radio__label" @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: 'ElRadio',
- mixins: [Emitter],
- inject: {
- elForm: {
- default: ''
- },
- elFormItem: {
- default: ''
- }
- },
- componentName: 'ElRadio',
- props: {
- value: {},
- label: {},
- disabled: Boolean,
- name: String,
- border: Boolean,
- size: String
- },
- data() {
- return {
- focus: false
- };
- },
- computed: {
- isGroup() {
- let parent = this.$parent;
- while (parent) {
- if (parent.$options.componentName !== 'ElRadioGroup') {
- parent = parent.$parent;
- } else {
- this._radioGroup = parent;
- return true;
- }
- }
- return false;
- },
- model: {
- get() {
- return this.isGroup ? this._radioGroup.value : this.value;
- },
- set(val) {
- if (this.isGroup) {
- this.dispatch('ElRadioGroup', 'input', [val]);
- } else {
- this.$emit('input', val);
- }
- this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
- }
- },
- _elFormItemSize() {
- return (this.elFormItem || {}).elFormItemSize;
- },
- radioSize() {
- const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
- return this.isGroup
- ? this._radioGroup.radioGroupSize || temRadioSize
- : temRadioSize;
- },
- isDisabled() {
- return this.isGroup
- ? this._radioGroup.disabled || this.disabled || (this.elForm || {}).disabled
- : this.disabled || (this.elForm || {}).disabled;
- },
- tabIndex() {
- return (this.isDisabled || (this.isGroup && this.model !== this.label)) ? -1 : 0;
- }
- },
- methods: {
- handleChange() {
- this.$nextTick(() => {
- this.$emit('change', this.model);
- this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);
- });
- }
- }
- };
- </script>
|