diff --git a/packages/devui-vue/devui/avatar/src/avatar-types.ts b/packages/devui-vue/devui/avatar/src/avatar-types.ts index 2a430096e8..af8609ab35 100644 --- a/packages/devui-vue/devui/avatar/src/avatar-types.ts +++ b/packages/devui-vue/devui/avatar/src/avatar-types.ts @@ -1,5 +1,10 @@ import { ExtractPropTypes } from "vue"; +export interface IconPropsType { + width: number; + height: number; +} + export const avatarProps = { name: { type: String, diff --git a/packages/devui-vue/devui/avatar/src/avatar.tsx b/packages/devui-vue/devui/avatar/src/avatar.tsx index fe4d199353..963a286aa8 100644 --- a/packages/devui-vue/devui/avatar/src/avatar.tsx +++ b/packages/devui-vue/devui/avatar/src/avatar.tsx @@ -10,7 +10,7 @@ export default defineComponent({ name: 'DAvatar', props: avatarProps, setup(props: AvatarProps) { - const { name, width, height, customText, gender, imgSrc, isRound } = + const { name, width, height, customText, gender } = toRefs(props); const isNobody = ref(true); const isErrorImg = ref(false); @@ -18,75 +18,76 @@ export default defineComponent({ const code = ref(); const nameDisplay = ref(); - const calcValues = (nameInput: string): void => { - const userName = nameInput; - const minNum = Math.min(width.value, height.value); - if (userName) { - isNobody.value = false; - setDisplayName(userName, minNum); - } else if (userName === '') { - isNobody.value = false; - nameDisplay.value = ''; - } else { - isNobody.value = true; + const getBackgroundColor = (char: string): void => { + if (gender.value) { + if (gender.value.toLowerCase() === 'male') { + code.value = 1; + } else if (gender.value.toLowerCase() === 'female') { + code.value = 0; + } else { + throw new Error('gender must be "Male" or "Female"'); + } + return; } - fontSize.value = minNum / 4 + 3; + const unicode = char.charCodeAt(0); + code.value = unicode % 2; }; - const setDisplayName = (name: string, width: number): void => { + const setDisplayName = (nameValue: string, widthValue: number): void => { if (customText.value) { nameDisplay.value = customText.value; getBackgroundColor(customText.value.substr(0, 1)); return; } - if (name.length < 2) { - nameDisplay.value = name; + if (nameValue.length < 2) { + nameDisplay.value = nameValue; } else { // 以中文开头显示最后两个字符 - if (/^[\u4e00-\u9fa5]/.test(name)) { - nameDisplay.value = name.substr(name.length - 2, 2); + if (/^[\u4e00-\u9fa5]/.test(nameValue)) { + nameDisplay.value = nameValue.substr(nameValue.length - 2, 2); // 英文开头 - } else if (/^[A-Za-z]/.test(name)) { + } else if (/^[A-Za-z]/.test(nameValue)) { // 含有两个及以上，包含空格，下划线，中划线分隔符的英文名取前两个字母的首字母 - if (/[_ -]/.test(name)) { - const str_before = name.split(/_|-|\s+/)[0]; - const str_after = name.split(/_|-|\s+/)[1]; + if (/[_ -]/.test(nameValue)) { + const str_before = nameValue.split(/_|-|\s+/)[0]; + const str_after = nameValue.split(/_|-|\s+/)[1]; nameDisplay.value = str_before.substr(0, 1).toUpperCase() + str_after.substr(0, 1).toUpperCase(); } else { // 一个英文名的情况显示前两个字母 - nameDisplay.value = name.substr(0, 2).toUpperCase(); + nameDisplay.value = nameValue.substr(0, 2).toUpperCase(); } } else { // 非中英文开头默认取前两个字符 - nameDisplay.value = name.substr(0, 2); + nameDisplay.value = nameValue.substr(0, 2); } } - if (width < 30) { - nameDisplay.value = name.substr(0, 1).toUpperCase(); + if (widthValue < 30) { + nameDisplay.value = nameValue.substr(0, 1).toUpperCase(); } - getBackgroundColor(name.substr(0, 1)); + getBackgroundColor(nameValue.substr(0, 1)); }; - const getBackgroundColor = (char: string): void => { - if (gender.value) { - if (gender.value.toLowerCase() === 'male') { - code.value = 1; - } else if (gender.value.toLowerCase() === 'female') { - code.value = 0; - } else { - throw new Error('gender must be "Male" or "Female"'); - } - return; - } - const unicode = char.charCodeAt(0); - code.value = unicode % 2; - }; const showErrorAvatar = (): void => { isErrorImg.value = true; }; + const calcValues = (nameInput: string): void => { + const userName = nameInput; + const minNum = Math.min(width.value, height.value); + if (userName) { + isNobody.value = false; + setDisplayName(userName, minNum); + } else if (userName === '') { + isNobody.value = false; + nameDisplay.value = ''; + } else { + isNobody.value = true; + } + fontSize.value = minNum / 4 + 3; + }; + calcValues(customText.value ? customText.value : name.value); watch([name, width, height, customText, gender], () => { diff --git a/packages/devui-vue/devui/avatar/src/icon-body.tsx b/packages/devui-vue/devui/avatar/src/icon-body.tsx index df6bcc6b4a..89d084f82d 100644 --- a/packages/devui-vue/devui/avatar/src/icon-body.tsx +++ b/packages/devui-vue/devui/avatar/src/icon-body.tsx @@ -1,4 +1,6 @@ -export const IconBody = (props: { width: number; height: number }) => { +import type { IconPropsType } from "./avatar-types"; + +export const IconBody = (props: IconPropsType): JSX.Element => { const { width, height } = props; return ( { > diff --git a/packages/devui-vue/devui/avatar/src/icon-nobody.tsx b/packages/devui-vue/devui/avatar/src/icon-nobody.tsx index cded157eba..a287a48688 100644 --- a/packages/devui-vue/devui/avatar/src/icon-nobody.tsx +++ b/packages/devui-vue/devui/avatar/src/icon-nobody.tsx @@ -1,4 +1,6 @@ -export const IconNobody = (props: { width: number; height: number }) => { +import type { IconPropsType } from "./avatar-types"; + +export const IconNobody = (props: IconPropsType): JSX.Element => { const { width, height } = props; return ( { >