Checkbox.js 4.6 KB

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