xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 7.39 kB
Source Map (JSON)
{"version":3,"file":"avatar.mjs","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import { computed, defineComponent, inject, nextTick, onMounted, onUpdated, ref } from 'vue';\nimport props from './props';\nimport { TdAvatarProps } from './type';\nimport { usePrefixClass, useCommonClassName } from '../hooks/useConfig';\nimport { useContent, useTNodeJSX } from '../hooks/tnode';\nimport Image, { ImageProps } from '../image';\n\nexport default defineComponent({\n name: 'XAvatar',\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(() => 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 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 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":["name","props","isImgExist","e","onMounted","nextTick","setScaleParams","onUpdated","content","_createVNode"],"mappings":"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"}