You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
1.9 KiB
92 lines
1.9 KiB
<template>
|
|
<view class="KeyValueRow">
|
|
<u--text class="keyName" :text="keyName" :mode="mode" :lines="lines" :color='leftColor' :size="size">
|
|
</u--text>
|
|
<u--text class="value" :text="value" :mode="mode" :lines="lines" :color='rightColor' :size="size">
|
|
</u--text>
|
|
</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 '28rpx'
|
|
}
|
|
},
|
|
|
|
/**
|
|
* date 日期格式化 , name姓名脱敏 张*三, price 显示金额
|
|
*/
|
|
mode: {
|
|
type: String,
|
|
default() {
|
|
return ''
|
|
}
|
|
},
|
|
/**
|
|
* 超出隐藏
|
|
*/
|
|
lines: {
|
|
type: String | Number,
|
|
default() {
|
|
return '1'
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.KeyValueRow {
|
|
box-sizing: border-box;
|
|
margin-bottom: 10rpx;
|
|
position: relative;
|
|
|
|
.keyName {
|
|
height: 100%;
|
|
width: auto;
|
|
display: inline-block;
|
|
}
|
|
|
|
.value {
|
|
position: absolute;
|
|
right: 0;
|
|
height: 100%;
|
|
width: auto;
|
|
display: inline-block;
|
|
text-align: right;
|
|
}
|
|
}
|
|
</style>
|