7facf81bb9c0666d71b963162dfa99f4cacdab1183f24775cbb8e0fdd0fbc39c3168203d0a715fda34f4e3ec758a87f62cd22bc4af3e2922aa3c6af435b527 2.7 KB

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