ScrollNumber.js 3.2 KB

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