radio.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <label
  3. class="el-radio"
  4. :class="[
  5. border && radioSize ? 'el-radio--' + radioSize : '',
  6. { 'is-disabled': isDisabled },
  7. { 'is-focus': focus },
  8. { 'is-bordered': border },
  9. { 'is-checked': model === label }
  10. ]"
  11. role="radio"
  12. :aria-checked="model === label"
  13. :aria-disabled="isDisabled"
  14. :tabindex="tabIndex"
  15. @keydown.space.stop.prevent="model = isDisabled ? model : label"
  16. >
  17. <span class="el-radio__input"
  18. :class="{
  19. 'is-disabled': isDisabled,
  20. 'is-checked': model === label
  21. }"
  22. >
  23. <span class="el-radio__inner"></span>
  24. <input
  25. ref="radio"
  26. class="el-radio__original"
  27. :value="label"
  28. type="radio"
  29. aria-hidden="true"
  30. v-model="model"
  31. @focus="focus = true"
  32. @blur="focus = false"
  33. @change="handleChange"
  34. :name="name"
  35. :disabled="isDisabled"
  36. tabindex="-1"
  37. autocomplete="off"
  38. >
  39. </span>
  40. <span class="el-radio__label" @keydown.stop>
  41. <slot></slot>
  42. <template v-if="!$slots.default">{{label}}</template>
  43. </span>
  44. </label>
  45. </template>
  46. <script>
  47. import Emitter from 'element-ui/src/mixins/emitter';
  48. export default {
  49. name: 'ElRadio',
  50. mixins: [Emitter],
  51. inject: {
  52. elForm: {
  53. default: ''
  54. },
  55. elFormItem: {
  56. default: ''
  57. }
  58. },
  59. componentName: 'ElRadio',
  60. props: {
  61. value: {},
  62. label: {},
  63. disabled: Boolean,
  64. name: String,
  65. border: Boolean,
  66. size: String
  67. },
  68. data() {
  69. return {
  70. focus: false
  71. };
  72. },
  73. computed: {
  74. isGroup() {
  75. let parent = this.$parent;
  76. while (parent) {
  77. if (parent.$options.componentName !== 'ElRadioGroup') {
  78. parent = parent.$parent;
  79. } else {
  80. this._radioGroup = parent;
  81. return true;
  82. }
  83. }
  84. return false;
  85. },
  86. model: {
  87. get() {
  88. return this.isGroup ? this._radioGroup.value : this.value;
  89. },
  90. set(val) {
  91. if (this.isGroup) {
  92. this.dispatch('ElRadioGroup', 'input', [val]);
  93. } else {
  94. this.$emit('input', val);
  95. }
  96. this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
  97. }
  98. },
  99. _elFormItemSize() {
  100. return (this.elFormItem || {}).elFormItemSize;
  101. },
  102. radioSize() {
  103. const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
  104. return this.isGroup
  105. ? this._radioGroup.radioGroupSize || temRadioSize
  106. : temRadioSize;
  107. },
  108. isDisabled() {
  109. return this.isGroup
  110. ? this._radioGroup.disabled || this.disabled || (this.elForm || {}).disabled
  111. : this.disabled || (this.elForm || {}).disabled;
  112. },
  113. tabIndex() {
  114. return (this.isDisabled || (this.isGroup && this.model !== this.label)) ? -1 : 0;
  115. }
  116. },
  117. methods: {
  118. handleChange() {
  119. this.$nextTick(() => {
  120. this.$emit('change', this.model);
  121. this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);
  122. });
  123. }
  124. }
  125. };
  126. </script>