samehome/components/KeyValueRow/KeyValueRow.vue

<template>
    <view class="KeyValueRow">
        <!-- <u--text class="keyName" :text="keyName" :mode="mode"  :color='leftColor' :size="size">
        </u--text>
        <u--text class="value" :text="value" :mode="mode" :lines="lines" :color='rightColor' :size="size">
        </u--text> -->
        <view class="keyName"
            :style="{ color: leftColor, fontSize: size || leftSize, lineHeight: lineHeight || lineHeightValue }">{{
                    keyName
            }} </view>
        <view class="value"
            :style="{ color: rightColor, fontSize: size || rightSize, lineHeight: lineHeight || lineHeightValue }">{{
                    value
            }}</view>
    </view>
</template>

<script>
export default {
    name: 'KeyValueRow',
    props: {
        keyName: {
            type: String | Number,
            default() {
                return ''
            }
        },
        value: {
            type: String | Number,
            default() {
                return ''
            }
        },
        leftColor: {
            type: String | Number,
            default() {
                return '#A1A0A8'
            }
        },
        rightColor: {
            type: String | Number,
            default() {
                return '#fff'
            }
        },
        size: {
            type: String | Number,
            default() {
                return ''
            }
        },
        leftSize: {
            type: String | Number,
            default() {
                return '28rpx'
            }
        },
        rightSize: {
            type: String | Number,
            default() {
                return '28rpx'
            }
        },
        lineHeight: {
            type: String | Number,
            default() {
                return ''
            }
        },
    },
    data() {
        return {
        }
    },
    computed: {
        lineHeightValue() {
            let height = '28rpx'
            if (this.size) {
                height = this.size
            }
            console.log(height);
            return height;
        },
    },
}
</script>

<style lang="scss" scoped>
.KeyValueRow {
    box-sizing: border-box;
    margin-bottom: 10rpx;
    position: relative;

    .keyName {
        vertical-align: top;
        // height: 100%;
        width: auto;
        display: inline-block;
    }

    .value {
        position: absolute;
        right: 0;
        // height: 100%;
        width: auto;
        display: inline-block;
        text-align: right;
    }
}
</style>