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

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, warn, toRefs, resolveComponent, openBlock, createBlock, toDisplayString, createTextVNode, withCtx, mergeProps } from 'vue';
import { getEnvs } from '../utils';

const SIZE_CLASS = {
  large: "large",
  normal: "normal",
  small: "small"
};
const AtAvatar = defineComponent({
  name: "AtAvatar",
  props: {
    size: {
      type: String,
      default: "normal",
      validator: (prop) => ["large", "normal", "small"].includes(prop)
    },
    circle: Boolean,
    text: String,
    image: String,
    openData: Object
  },
  setup(props) {
    const { isWEAPP } = getEnvs();
    const letter = computed(() => {
      return Boolean(props.text) ? String(props.text)[0] : "";
    });
    const iconSize = computed(() => {
      let size = SIZE_CLASS[props.size];
      if (!size) {
        warn("Prop `size` must be one of <'large' | 'normal' | 'small'>", "\nActual: '", props.size, "', now use 'normal' instead!");
        size = "normal";
      }
      return size;
    });
    return {
      ...toRefs(props),
      isWEAPP,
      letter,
      iconSize
    };
  }
});

// Binding optimization for webpack code-split
const _resolveComponent = resolveComponent, _openBlock = openBlock, _createBlock = createBlock, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _withCtx = withCtx, _mergeProps = mergeProps;

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

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, {
    class: ['at-avatar', {
			'at-avatar--circle': _ctx.circle,
			[`at-avatar--${_ctx.iconSize}`]: _ctx.iconSize,
    }]
  }), {
    default: _withCtx(() => [
      (_ctx.isWEAPP && _ctx.openData && _ctx.openData.type === 'userAvatarUrl')
        ? (_openBlock(), _createBlock(_component_taro_open_data, {
            key: 0,
            type: _ctx.openData.type
          }, null, 8 /* PROPS */, ["type"]))
        : (_ctx.image)
          ? (_openBlock(), _createBlock(_component_taro_image, {
              key: 1,
              class: "at-avatar__img",
              src: _ctx.image
            }, null, 8 /* PROPS */, ["src"]))
          : (_openBlock(), _createBlock(_component_taro_text, {
              key: 2,
              class: "at-avatar__text"
            }, {
              default: _withCtx(() => [
                _createTextVNode(_toDisplayString(_ctx.letter), 1 /* TEXT */)
              ]),
              _: 1 /* STABLE */
            }))
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class"]))
}


AtAvatar.render = _sfc_render;

export default AtAvatar;