ScrollNumber.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createVNode as _createVNode } from "vue";
  3. var __rest = this && this.__rest || function (s, e) {
  4. var t = {};
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  8. }
  9. return t;
  10. };
  11. import classNames from '../_util/classNames';
  12. import PropTypes from '../_util/vue-types';
  13. import { cloneElement } from '../_util/vnode';
  14. import { defineComponent } from 'vue';
  15. import useConfigInject from '../config-provider/hooks/useConfigInject';
  16. import SingleNumber from './SingleNumber';
  17. import { filterEmpty } from '../_util/props-util';
  18. const scrollNumberProps = {
  19. prefixCls: String,
  20. count: PropTypes.any,
  21. component: String,
  22. title: PropTypes.any,
  23. show: Boolean
  24. };
  25. export default defineComponent({
  26. compatConfig: {
  27. MODE: 3
  28. },
  29. name: 'ScrollNumber',
  30. inheritAttrs: false,
  31. props: scrollNumberProps,
  32. setup(props, _ref) {
  33. let {
  34. attrs,
  35. slots
  36. } = _ref;
  37. const {
  38. prefixCls
  39. } = useConfigInject('scroll-number', props);
  40. return () => {
  41. var _a;
  42. const _b = _extends(_extends({}, props), attrs),
  43. {
  44. prefixCls: customizePrefixCls,
  45. count,
  46. title,
  47. show,
  48. component: Tag = 'sup',
  49. class: className,
  50. style
  51. } = _b,
  52. restProps = __rest(_b, ["prefixCls", "count", "title", "show", "component", "class", "style"]);
  53. // ============================ Render ============================
  54. const newProps = _extends(_extends({}, restProps), {
  55. style,
  56. 'data-show': props.show,
  57. class: classNames(prefixCls.value, className),
  58. title: title
  59. });
  60. // Only integer need motion
  61. let numberNodes = count;
  62. if (count && Number(count) % 1 === 0) {
  63. const numberList = String(count).split('');
  64. numberNodes = numberList.map((num, i) => _createVNode(SingleNumber, {
  65. "prefixCls": prefixCls.value,
  66. "count": Number(count),
  67. "value": num,
  68. "key": numberList.length - i
  69. }, null));
  70. }
  71. // allow specify the border
  72. // mock border-color by box-shadow for compatible with old usage:
  73. // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
  74. if (style && style.borderColor) {
  75. newProps.style = _extends(_extends({}, style), {
  76. boxShadow: `0 0 0 1px ${style.borderColor} inset`
  77. });
  78. }
  79. const children = filterEmpty((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
  80. if (children && children.length) {
  81. return cloneElement(children, {
  82. class: classNames(`${prefixCls.value}-custom-component`)
  83. }, false);
  84. }
  85. return _createVNode(Tag, newProps, {
  86. default: () => [numberNodes]
  87. });
  88. };
  89. }
  90. });