choo-taro-ui-vue3/lib/loading/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, renderList, Fragment, openBlock, createElementBlock, resolveComponent, normalizeStyle, createVNode, mergeProps, withCtx, createBlock } from 'vue';
import { pxTransform } from '../utils';

const AtLoading = defineComponent({
  name: "AtLoading",
  props: {
    size: { type: [String, Number], default: 0 },
    color: [String, Number]
  },
  setup(props) {
    const loadingSize = computed(() => {
      return pxTransform(parseInt(`${props.size}`));
    });
    const sizeStyle = computed(() => ({
      width: loadingSize.value,
      height: loadingSize.value
    }));
    const ringStyle = computed(() => ({
      ...sizeStyle.value,
      border: props.color ? `1px solid ${props.color}` : "",
      "border-color": props.color ? `${props.color} transparent transparent transparent` : ""
    }));
    return {
      sizeStyle,
      ringStyle
    };
  }
});

// Binding optimization for webpack code-split
const _renderList = renderList, _Fragment = Fragment, _openBlock = openBlock, _createElementBlock = createElementBlock, _resolveComponent = resolveComponent, _normalizeStyle = normalizeStyle, _createVNode = createVNode, _mergeProps = mergeProps, _withCtx = withCtx, _createBlock = createBlock;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, {
    class: "at-loading",
    style: _ctx.sizeStyle
  }), {
    default: _withCtx(() => [
      (_openBlock(), _createElementBlock(_Fragment, null, _renderList(3, (n) => {
        return _createVNode(_component_taro_view, {
          key: n,
          style: _normalizeStyle(_ctx.ringStyle),
          class: "at-loading__ring"
        }, null, 8 /* PROPS */, ["style"])
      }), 64 /* STABLE_FRAGMENT */))
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["style"]))
}


AtLoading.render = _sfc_render;

export default AtLoading;