@ly-js/ui/es/components/loading/src/index.mjs

`@ly-js/ui` 是基于`vue3`常用库，会在`@ly-js/element`、`@ly-js/vant`中引入

import { createVNode, defineComponent, computed } from 'vue';
import { addUnit } from '@ly-js/utils';
import { bem, name, loadingProps } from './base.mjs';

const SpinIcon = Array(12).fill(null).map((_, index) => createVNode("i", {
  "class": bem("line", String(index + 1))
}, null, 2));
const CircularIcon = createVNode("svg", {
  "class": bem("circular"),
  "viewBox": "25 25 50 50"
}, [createVNode("circle", {
  "cx": "50",
  "cy": "50",
  "r": "20",
  "fill": "none"
}, null)], 2);
var _Loading = defineComponent({
  name,
  props: loadingProps,
  setup(props, {
    slots
  }) {
    const spinnerStyle = computed(() => ({
      color: props.color,
      size: props.size,
      width: props.size,
      height: props.size
    }));
    const renderText = () => {
      var _a;
      if (slots.default) {
        return createVNode("span", {
          "class": bem("text"),
          "style": {
            fontSize: addUnit(props.textSize),
            color: (_a = props.textColor) != null ? _a : props.color
          }
        }, [slots.default()], 6);
      }
    };
    const renderLoadingAnimation = () => {
      const {
        type
      } = props;
      if (!props.onlyText) {
        return createVNode("span", {
          "class": bem("spinner", type),
          "style": spinnerStyle.value
        }, [type === "spinner" ? SpinIcon : CircularIcon], 6);
      }
    };
    return () => {
      const {
        type,
        vertical
      } = props;
      return createVNode("div", {
        "class": bem([type, {
          vertical
        }])
      }, [renderLoadingAnimation(), renderText()], 2);
    };
  }
});

export { _Loading as default };