LoadingIcon.js 1.8 KB

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