Checkbox.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  3. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  4. var _excluded = ["prefixCls", "name", "id", "type", "disabled", "readonly", "tabindex", "autofocus", "value", "required"];
  5. import { createVNode as _createVNode } from "vue";
  6. import { defineComponent, ref, watch } from 'vue';
  7. import classNames from '../_util/classNames';
  8. import PropTypes from '../_util/vue-types';
  9. import { initDefaultProps } from '../_util/props-util';
  10. export var checkboxProps = {
  11. prefixCls: String,
  12. name: String,
  13. id: String,
  14. type: String,
  15. defaultChecked: {
  16. type: [Boolean, Number],
  17. default: undefined
  18. },
  19. checked: {
  20. type: [Boolean, Number],
  21. default: undefined
  22. },
  23. disabled: Boolean,
  24. tabindex: {
  25. type: [Number, String]
  26. },
  27. readonly: Boolean,
  28. autofocus: Boolean,
  29. value: PropTypes.any,
  30. required: Boolean
  31. };
  32. export default defineComponent({
  33. compatConfig: {
  34. MODE: 3
  35. },
  36. name: 'Checkbox',
  37. inheritAttrs: false,
  38. props: initDefaultProps(checkboxProps, {
  39. prefixCls: 'rc-checkbox',
  40. type: 'checkbox',
  41. defaultChecked: false
  42. }),
  43. emits: ['click', 'change'],
  44. setup: function setup(props, _ref) {
  45. var attrs = _ref.attrs,
  46. emit = _ref.emit,
  47. expose = _ref.expose;
  48. var checked = ref(props.checked === undefined ? props.defaultChecked : props.checked);
  49. var inputRef = ref();
  50. watch(function () {
  51. return props.checked;
  52. }, function () {
  53. checked.value = props.checked;
  54. });
  55. expose({
  56. focus: function focus() {
  57. var _inputRef$value;
  58. (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 ? void 0 : _inputRef$value.focus();
  59. },
  60. blur: function blur() {
  61. var _inputRef$value2;
  62. (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 ? void 0 : _inputRef$value2.blur();
  63. }
  64. });
  65. var eventShiftKey = ref();
  66. var handleChange = function handleChange(e) {
  67. if (props.disabled) {
  68. return;
  69. }
  70. if (props.checked === undefined) {
  71. checked.value = e.target.checked;
  72. }
  73. e.shiftKey = eventShiftKey.value;
  74. var eventObj = {
  75. target: _objectSpread(_objectSpread({}, props), {}, {
  76. checked: e.target.checked
  77. }),
  78. stopPropagation: function stopPropagation() {
  79. e.stopPropagation();
  80. },
  81. preventDefault: function preventDefault() {
  82. e.preventDefault();
  83. },
  84. nativeEvent: e
  85. };
  86. // fix https://github.com/vueComponent/ant-design-vue/issues/3047
  87. // 受控模式下维持现有状态
  88. if (props.checked !== undefined) {
  89. inputRef.value.checked = !!props.checked;
  90. }
  91. emit('change', eventObj);
  92. eventShiftKey.value = false;
  93. };
  94. var onClick = function onClick(e) {
  95. emit('click', e);
  96. // onChange没能获取到shiftKey,使用onClick hack
  97. eventShiftKey.value = e.shiftKey;
  98. };
  99. return function () {
  100. var _classNames;
  101. var prefixCls = props.prefixCls,
  102. name = props.name,
  103. id = props.id,
  104. type = props.type,
  105. disabled = props.disabled,
  106. readonly = props.readonly,
  107. tabindex = props.tabindex,
  108. autofocus = props.autofocus,
  109. value = props.value,
  110. required = props.required,
  111. others = _objectWithoutProperties(props, _excluded);
  112. var className = attrs.class,
  113. onFocus = attrs.onFocus,
  114. onBlur = attrs.onBlur,
  115. onKeydown = attrs.onKeydown,
  116. onKeypress = attrs.onKeypress,
  117. onKeyup = attrs.onKeyup;
  118. var othersAndAttrs = _objectSpread(_objectSpread({}, others), attrs);
  119. var globalProps = Object.keys(othersAndAttrs).reduce(function (prev, key) {
  120. if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
  121. prev[key] = othersAndAttrs[key];
  122. }
  123. return prev;
  124. }, {});
  125. var classString = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-checked"), checked.value), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
  126. var inputProps = _objectSpread(_objectSpread({
  127. name: name,
  128. id: id,
  129. type: type,
  130. readonly: readonly,
  131. disabled: disabled,
  132. tabindex: tabindex,
  133. class: "".concat(prefixCls, "-input"),
  134. checked: !!checked.value,
  135. autofocus: autofocus,
  136. value: value
  137. }, globalProps), {}, {
  138. onChange: handleChange,
  139. onClick: onClick,
  140. onFocus: onFocus,
  141. onBlur: onBlur,
  142. onKeydown: onKeydown,
  143. onKeypress: onKeypress,
  144. onKeyup: onKeyup,
  145. required: required
  146. });
  147. return _createVNode("span", {
  148. "class": classString
  149. }, [_createVNode("input", _objectSpread({
  150. "ref": inputRef
  151. }, inputProps), null), _createVNode("span", {
  152. "class": "".concat(prefixCls, "-inner")
  153. }, null)]);
  154. };
  155. }
  156. });