tdesign-vue-next/es/avatar/avatar.mjs.map

TDesign Component for vue-next

{"version":3,"file":"avatar.mjs","sources":["../../../components/avatar/avatar.tsx"],"sourcesContent":["import { computed, defineComponent, inject, nextTick, onMounted, onUpdated, ref, watch } from 'vue';\nimport props from './props';\nimport { TdAvatarProps } from './type';\nimport { useContent, useTNodeJSX, usePrefixClass, useCommonClassName } from '@tdesign/shared-hooks';\n\nimport Image, { ImageProps } from '../image';\n\nexport default defineComponent({\n  name: 'TAvatar',\n  props,\n  setup(props: TdAvatarProps) {\n    const COMPONENT_NAME = usePrefixClass('avatar');\n    const renderContent = useContent();\n    const renderTNodeJSX = useTNodeJSX();\n    const { SIZE } = useCommonClassName();\n    const avatarGroup = inject('avatarGroup', undefined);\n    const avatar = ref<HTMLElement | null>(null);\n    const avatarChild = ref<HTMLElement | null>(null);\n    const isImgExist = ref(true);\n    // 内容区在左右两边的间距保持为4\n    const gap = ref(4);\n    const scale = ref('');\n\n    const sizeValue = computed<keyof typeof SIZE.value>(() => props.size || avatarGroup?.size);\n    const isCustomSize = computed(() => sizeValue.value && !SIZE.value[sizeValue.value]);\n\n    const customAvatarSize = computed(() => {\n      return isCustomSize.value\n        ? {\n            width: sizeValue.value,\n            height: sizeValue.value,\n            'font-size': `${Number.parseInt(sizeValue.value, 10) / 2}px`,\n          }\n        : {};\n    });\n    const customImageSize = computed(() => {\n      return isCustomSize.value\n        ? {\n            height: sizeValue.value,\n            width: sizeValue.value,\n          }\n        : {};\n    });\n    const customCharacterSize = computed(() => {\n      return {\n        transform: scale.value,\n      };\n    });\n\n    const handleImgLoadError: ImageProps['onError'] = ({ e }) => {\n      const { hideOnLoadFailed } = props;\n      isImgExist.value = !hideOnLoadFailed;\n      props.onError?.({ e });\n    };\n    // 设置字符头像大小自适应\n    const setScaleParams = () => {\n      const $avatar = avatar.value as HTMLElement;\n      const $avatarChild = avatarChild.value as HTMLElement;\n      const avatarWidth = $avatar?.offsetWidth;\n      const avatarChildWidth = $avatarChild?.offsetWidth;\n      if (gap.value * 2 < avatarWidth) {\n        scale.value =\n          avatarChildWidth > avatarWidth - gap.value * 2\n            ? `scale(${(avatarWidth - gap.value * 2) / avatarChildWidth})`\n            : 'scale(1)';\n      }\n    };\n\n    onMounted(() => {\n      nextTick(() => {\n        setScaleParams();\n      });\n    });\n\n    onUpdated(() => {\n      nextTick(() => {\n        setScaleParams();\n      });\n    });\n\n    watch(\n      () => props.image,\n      (val) => {\n        if (val) {\n          // 重置 flag，避免切换后无法渲染\n          isImgExist.value = true;\n        }\n      },\n    );\n\n    return () => {\n      let content = renderContent('default', 'content');\n      const icon = renderTNodeJSX('icon');\n      const isIconOnly = icon && !content;\n      const { shape, image, alt } = props;\n      const avatarClass = [\n        `${COMPONENT_NAME.value}`,\n        SIZE.value[sizeValue.value],\n        {\n          [`${COMPONENT_NAME.value}--circle`]: shape === 'circle',\n          [`${COMPONENT_NAME.value}--round`]: shape === 'round',\n          [`${COMPONENT_NAME.value}__icon`]: !!isIconOnly,\n        },\n      ];\n      content = (\n        <span ref={avatarChild} style={{ ...customCharacterSize.value }}>\n          {content}\n        </span>\n      );\n      if (icon) {\n        content = [icon, !isIconOnly ? content : ''];\n      }\n\n      if (image && isImgExist.value) {\n        content = (\n          <Image\n            style={{ ...customImageSize.value }}\n            src={image}\n            alt={alt}\n            error=\"\"\n            loading=\"\"\n            onError={handleImgLoadError}\n            {...props.imageProps}\n          ></Image>\n        );\n      }\n      return (\n        <div ref={avatar} class={avatarClass} style={{ ...customAvatarSize.value }}>\n          {content}\n        </div>\n      );\n    };\n  },\n});\n"],"names":["defineComponent","name","props","setup","COMPONENT_NAME","usePrefixClass","renderContent","useContent","renderTNodeJSX","useTNodeJSX","_useCommonClassName","useCommonClassName","SIZE","avatarGroup","inject","avatar","ref","avatarChild","isImgExist","gap","scale","sizeValue","computed","size","isCustomSize","value","customAvatarSize","width","height","Number","parseInt","customImageSize","customCharacterSize","transform","handleImgLoadError","_ref","_props2$onError","e","hideOnLoadFailed","onError","setScaleParams","$avatar","$avatarChild","avatarWidth","offsetWidth","avatarChildWidth","concat","onMounted","nextTick","onUpdated","watch","image","val","content","icon","isIconOnly","shape","alt","avatarClass","_defineProperty","_content","_createVNode","_objectSpread","Image","_mergeProps","imageProps"],"mappings":"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"}