LoadingIcon.js 1.8 KB

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