LoadingIcon.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/LoadingOutlined"));
  9. var _transition = _interopRequireDefault(require("../_util/transition"));
  10. const getCollapsedWidth = node => {
  11. if (node) {
  12. node.style.width = '0px';
  13. node.style.opacity = '0';
  14. node.style.transform = 'scale(0)';
  15. }
  16. };
  17. const getRealWidth = node => {
  18. (0, _vue.nextTick)(() => {
  19. if (node) {
  20. node.style.width = `${node.scrollWidth}px`;
  21. node.style.opacity = '1';
  22. node.style.transform = 'scale(1)';
  23. }
  24. });
  25. };
  26. const resetStyle = node => {
  27. if (node && node.style) {
  28. node.style.width = null;
  29. node.style.opacity = null;
  30. node.style.transform = null;
  31. }
  32. };
  33. var _default = exports.default = (0, _vue.defineComponent)({
  34. compatConfig: {
  35. MODE: 3
  36. },
  37. name: 'LoadingIcon',
  38. props: {
  39. prefixCls: String,
  40. loading: [Boolean, Object],
  41. existIcon: Boolean
  42. },
  43. setup(props) {
  44. return () => {
  45. const {
  46. existIcon,
  47. prefixCls,
  48. loading
  49. } = props;
  50. if (existIcon) {
  51. return (0, _vue.createVNode)("span", {
  52. "class": `${prefixCls}-loading-icon`
  53. }, [(0, _vue.createVNode)(_LoadingOutlined.default, null, null)]);
  54. }
  55. const visible = !!loading;
  56. return (0, _vue.createVNode)(_transition.default, {
  57. "name": `${prefixCls}-loading-icon-motion`,
  58. "onBeforeEnter": getCollapsedWidth,
  59. "onEnter": getRealWidth,
  60. "onAfterEnter": resetStyle,
  61. "onBeforeLeave": getRealWidth,
  62. "onLeave": node => {
  63. setTimeout(() => {
  64. getCollapsedWidth(node);
  65. });
  66. },
  67. "onAfterLeave": resetStyle
  68. }, {
  69. default: () => [visible ? (0, _vue.createVNode)("span", {
  70. "class": `${prefixCls}-loading-icon`
  71. }, [(0, _vue.createVNode)(_LoadingOutlined.default, null, null)]) : null]
  72. });
  73. };
  74. }
  75. });