first commit
This commit is contained in:
lingxiao865
200
uni_modules/tdesign-uniapp/components/avatar/avatar.vue
Normal file
200
uni_modules/tdesign-uniapp/components/avatar/avatar.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<view
|
||||
:class="[
|
||||
classPrefix + '__wrapper',
|
||||
tClass
|
||||
]"
|
||||
:style="tools._style([utils.getStyles(isShow), customStyle, innerStyle])"
|
||||
>
|
||||
<t-badge
|
||||
v-if="badgeProps"
|
||||
:color="badgeProps.color || ''"
|
||||
:content="badgeProps.content || ''"
|
||||
:count="badgeProps.count || 0"
|
||||
:dot="badgeProps.dot || false"
|
||||
:max-count="badgeProps.maxCount || 99"
|
||||
:offset="badgeProps.offset || []"
|
||||
:shape="badgeProps.shape || 'circle'"
|
||||
:show-zero="badgeProps.showZero || false"
|
||||
:size="badgeProps.size || 'medium'"
|
||||
:t-class="badgeProps.tClass"
|
||||
:t-class-content="badgeProps.tClassContent"
|
||||
:t-class-count="badgeProps.tClassCount"
|
||||
>
|
||||
<view
|
||||
:class="[
|
||||
utils.getClass(classPrefix, dataSize || 'medium', dataShape, dataBordered),
|
||||
tClassImage
|
||||
]"
|
||||
:style="utils.getSize(dataSize, windowWidth)"
|
||||
:aria-label="ariaLabel || alt || '头像'"
|
||||
:aria-role="ariaRole || 'img'"
|
||||
:aria-hidden="ariaHidden"
|
||||
>
|
||||
<t-image
|
||||
v-if="image"
|
||||
:t-class="prefix + '-image ' + classPrefix + '__image'"
|
||||
:t-class-load="tClassAlt"
|
||||
:custom-style="imageCustomStyle"
|
||||
style="width: 100%;height: 100%;"
|
||||
:src="image"
|
||||
:mode="(imageProps && imageProps.mode) || 'aspectFill'"
|
||||
:lazy="(imageProps && imageProps.lazy) || false"
|
||||
:loading="(imageProps && imageProps.loading) || 'default'"
|
||||
:shape="(imageProps && imageProps.shape) || 'round'"
|
||||
:webp="(imageProps && imageProps.webp) || false"
|
||||
:error="alt || 'default'"
|
||||
@error="onLoadError"
|
||||
/>
|
||||
<block
|
||||
v-else-if="iconName || tools.isNoEmptyObj(iconData)"
|
||||
name="icon"
|
||||
>
|
||||
<t-icon
|
||||
:t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (iconData.activeIdx == iconData.index ? 'active ' : ' ') + tClassIcon"
|
||||
:prefix="iconData.prefix"
|
||||
:name="iconName || iconData.name"
|
||||
:size="iconData.size"
|
||||
:color="iconData.color"
|
||||
:aria-hidden="!!iconData.ariaHidden"
|
||||
:aria-label="iconData.ariaLabel"
|
||||
:aria-role="iconData.ariaRole"
|
||||
:custom-style="iconCustomStyle"
|
||||
@click="iconData.click || ''"
|
||||
/>
|
||||
</block>
|
||||
<view
|
||||
v-else
|
||||
:class="[
|
||||
classPrefix + '__text ',
|
||||
tClassContent
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</t-badge>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TIcon from '../icon/icon';
|
||||
import TBadge from '../badge/badge';
|
||||
import TImage from '../image/image';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import avatarProps from './props';
|
||||
import { setIcon, systemInfo } from '../common/utils';
|
||||
import tools from '../common/utils.wxs';
|
||||
import * as utils from './computed.js';
|
||||
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
|
||||
|
||||
|
||||
const name = `${prefix}-avatar`;
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-image`,
|
||||
`${prefix}-class-icon`,
|
||||
`${prefix}-class-alt`,
|
||||
`${prefix}-class-content`,
|
||||
],
|
||||
mixins: [ChildrenMixin(RELATION_MAP.Avatar)],
|
||||
components: {
|
||||
TIcon,
|
||||
TBadge,
|
||||
TImage,
|
||||
},
|
||||
props: {
|
||||
...avatarProps,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
isShow: true,
|
||||
zIndex: 0,
|
||||
windowWidth: systemInfo.windowWidth,
|
||||
utils,
|
||||
tools,
|
||||
|
||||
iconName: '',
|
||||
iconData: {},
|
||||
|
||||
dataShape: this.shape,
|
||||
dataSize: this.size,
|
||||
dataBordered: this.bordered,
|
||||
innerStyle: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
iconCustomStyle() {
|
||||
const fontSize = {
|
||||
small: 'var(--td-avatar-icon-small-font-size, 20px)',
|
||||
medium: 'var(--td-avatar-icon-medium-font-size, 24px)',
|
||||
large: 'var(--td-avatar-icon-large-font-size, 32px)',
|
||||
};
|
||||
if (!fontSize[this.dataSize]) return '';
|
||||
return tools._style([
|
||||
{
|
||||
fontSize: fontSize[this.dataSize],
|
||||
},
|
||||
this.iconData.style || '',
|
||||
]);
|
||||
},
|
||||
imageCustomStyle() {
|
||||
return tools._style([
|
||||
{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
this.imageProps?.style || '',
|
||||
]);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
icon: {
|
||||
handler(t) {
|
||||
const obj = setIcon('icon', t, '');
|
||||
|
||||
Object.keys(obj).forEach((key) => {
|
||||
this[key] = obj[key];
|
||||
});
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
innerAfterLinked() {
|
||||
this.dataShape = this.shape || this[RELATION_MAP.Avatar]?.shape || 'circle';
|
||||
this.dataSize = this.size || this[RELATION_MAP.Avatar]?.size;
|
||||
this.dataBordered = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
onLoadError(e) {
|
||||
if (this.hideOnLoadFailed) {
|
||||
this.isShow = false;
|
||||
}
|
||||
this.$emit('error', e && e.e);
|
||||
},
|
||||
setStyle(val = '') {
|
||||
this.innerStyle = val;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './avatar.css';
|
||||
</style>
|
||||
Reference in New Issue
Block a user