Group.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import classNames from 'classnames';
  4. import PropTypes from '../_util/vue-types';
  5. import Radio from './Radio';
  6. import { getOptionProps, filterEmpty, hasProp, getListeners } from '../_util/props-util';
  7. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  8. function noop() {}
  9. export default {
  10. name: 'ARadioGroup',
  11. model: {
  12. prop: 'value'
  13. },
  14. props: {
  15. prefixCls: PropTypes.string,
  16. defaultValue: PropTypes.any,
  17. value: PropTypes.any,
  18. size: {
  19. 'default': 'default',
  20. validator: function validator(value) {
  21. return ['large', 'default', 'small'].includes(value);
  22. }
  23. },
  24. options: {
  25. 'default': function _default() {
  26. return [];
  27. },
  28. type: Array
  29. },
  30. disabled: Boolean,
  31. name: String,
  32. buttonStyle: PropTypes.string.def('outline')
  33. },
  34. data: function data() {
  35. var value = this.value,
  36. defaultValue = this.defaultValue;
  37. this.updatingValue = false;
  38. return {
  39. stateValue: value === undefined ? defaultValue : value
  40. };
  41. },
  42. provide: function provide() {
  43. return {
  44. radioGroupContext: this
  45. };
  46. },
  47. inject: {
  48. configProvider: { 'default': function _default() {
  49. return ConfigConsumerProps;
  50. } }
  51. },
  52. computed: {
  53. radioOptions: function radioOptions() {
  54. var disabled = this.disabled;
  55. return this.options.map(function (option) {
  56. return typeof option === 'string' ? { label: option, value: option } : _extends({}, option, { disabled: option.disabled === undefined ? disabled : option.disabled });
  57. });
  58. },
  59. classes: function classes() {
  60. var _ref;
  61. var prefixCls = this.prefixCls,
  62. size = this.size;
  63. return _ref = {}, _defineProperty(_ref, '' + prefixCls, true), _defineProperty(_ref, prefixCls + '-' + size, size), _ref;
  64. }
  65. },
  66. watch: {
  67. value: function value(val) {
  68. this.updatingValue = false;
  69. this.stateValue = val;
  70. }
  71. },
  72. methods: {
  73. onRadioChange: function onRadioChange(ev) {
  74. var _this = this;
  75. var lastValue = this.stateValue;
  76. var value = ev.target.value;
  77. if (!hasProp(this, 'value')) {
  78. this.stateValue = value;
  79. }
  80. // nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
  81. if (!this.updatingValue && value !== lastValue) {
  82. this.updatingValue = true;
  83. this.$emit('input', value);
  84. this.$emit('change', ev);
  85. }
  86. this.$nextTick(function () {
  87. _this.updatingValue = false;
  88. });
  89. }
  90. },
  91. render: function render() {
  92. var _this2 = this;
  93. var h = arguments[0];
  94. var _getListeners = getListeners(this),
  95. _getListeners$mouseen = _getListeners.mouseenter,
  96. mouseenter = _getListeners$mouseen === undefined ? noop : _getListeners$mouseen,
  97. _getListeners$mousele = _getListeners.mouseleave,
  98. mouseleave = _getListeners$mousele === undefined ? noop : _getListeners$mousele;
  99. var props = getOptionProps(this);
  100. var customizePrefixCls = props.prefixCls,
  101. options = props.options,
  102. buttonStyle = props.buttonStyle;
  103. var getPrefixCls = this.configProvider.getPrefixCls;
  104. var prefixCls = getPrefixCls('radio', customizePrefixCls);
  105. var groupPrefixCls = prefixCls + '-group';
  106. var classString = classNames(groupPrefixCls, groupPrefixCls + '-' + buttonStyle, _defineProperty({}, groupPrefixCls + '-' + props.size, props.size));
  107. var children = filterEmpty(this.$slots['default']);
  108. // 如果存在 options, 优先使用
  109. if (options && options.length > 0) {
  110. children = options.map(function (option) {
  111. if (typeof option === 'string') {
  112. return h(
  113. Radio,
  114. {
  115. key: option,
  116. attrs: { prefixCls: prefixCls,
  117. disabled: props.disabled,
  118. value: option,
  119. checked: _this2.stateValue === option
  120. }
  121. },
  122. [option]
  123. );
  124. } else {
  125. return h(
  126. Radio,
  127. {
  128. key: 'radio-group-value-options-' + option.value,
  129. attrs: { prefixCls: prefixCls,
  130. disabled: option.disabled || props.disabled,
  131. value: option.value,
  132. checked: _this2.stateValue === option.value
  133. }
  134. },
  135. [option.label]
  136. );
  137. }
  138. });
  139. }
  140. return h(
  141. 'div',
  142. { 'class': classString, on: {
  143. 'mouseenter': mouseenter,
  144. 'mouseleave': mouseleave
  145. }
  146. },
  147. [children]
  148. );
  149. }
  150. };