组件

<!--components/avatar/index.wxml-->
<view class="avatar-box {{row ? 'box-row' : ''}}">
    <view class="avatar" style="--width: {{width}}px;border-radius: {{circle ? '50%': '0'}};">
        <image src="{{img}}" mode="widthFix" wx:if="{{img}}" />
        <view class="head" wx:else style="background-color: {{bgColor}};color: {{color}};">
            {{head}}
        </view>
    </view>
    <view class="nickname {{row ? 'name-row' : ''}}" style="--fs: {{fontSize}}px">
        <view class="name" wx:if="{{name && showName}}">{{name}}</view>
        <view class="description" wx:if="{{name && showName && description}}">{{description}}</view>
    </view>
</view>

// components/avatar/index.ts
Component({

    properties: {
        img: { //头像图
            type: String,
            value: '',
        },
        name: { //昵称
            type: String,
            value: '',
        },
        description: { //描述
            type: String,
            value: '',
        },
        width: { //头像宽度
            type: Number,
            value: 55,
        },
        circle: { //是否为圆
            type: Boolean,
            value: true
        },
        bgColor: { //没有头像图片时的背景颜色
            type: String,
            value: '#3463fd'
        },
        color: { //文字颜色
            type: String,
            value: '#ffffff'
        },
        showName: { //是否显示昵称
            type: Boolean,
            value: true
        },
        row: { //是否横向排列
            type: Boolean,
            value: false
        },
        fontSize: { //昵称字体大小
            type: Number,
            value: 15
        }
        
    },
    data: {
        head: '',
    },
    observers: {
        // 没有头像时 截取昵称首字作为头像
        'name': function (param) {
            var head = param ? param.substr(0, 1) : '无'
            this.setData({ head: head })
        }
    },
    methods: {

    }
})

/* components/avatar/index.wxss */
.avatar-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box-row {
    flex-direction: row;
}

.avatar {
    width: var(--width);
    overflow: hidden;

    image {
        width: 100%;
    }

    .head {
        width: 100%;
        height: var(--width);
        line-height: $height;
        text-align: center;
        font-size: calc(var(--width) / 2);
        font-weight: bold;
    }
}

.nickname {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .name {
        font-size: var(--fs);
        font-weight: bold;
    }

    .description {
        font-size: calc(var(--fs) * 0.8);
        color: #555555;
    }
}

.name-row {
    align-items: flex-start;
    flex-direction: column-reverse;
    margin-left: 10px;
}

使用

{
    "usingComponents": {
        "avatar": "/components/avatar/index"
    }
}

<avatar img="{{img}}" name="March21Sunny" description="Welcome back" row fontSize="18"></avatar>

本文链接： https://jianz.xyz/index.php/archives/458/