uniapp开发item组件封装,可以用于后期微调使用。
<template>
<view class="item" :class="{border:showBorder}">
<div class="iteml">
<div class="item-title">{{title}}</div>
</div>
<div class="itemr">
<div class="item-value">
<slot></slot>
</div>
<div class="uicon" v-if="showRightIcon">
<u-icon name="arrow-right" color="#8E8E8E" size="16"></u-icon>
</div>
<div class="uicon2" v-if="!showRightIcon">
</div>
</div>
</view>
</template>
<script>
export default {
data() {
return {
}
},
props: {
title: {
type: String,
default () {
return '';
}
},
value: {
type: String,
default () {
return '';
}
},
showRightIcon: {
type: Boolean,
default () {
return true;
}
},
showBorder: {
type: Boolean,
default () {
return true;
}
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
.border {
border-bottom: 1rpx solid #EEEEEE;
}
.item {
height: 97rpx;
display: flex;
width: 686rpx;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
margin: 0 auto;
.iteml {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.item-title {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 34rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
margin-left: 32rpx;
color: #000000;
}
}
.itemr {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.item-value {
font-size: 34rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.uicon {
margin-right: 32rpx;
margin-left: 15rpx;
}
}
}
.uicon2 {
width: 32rpx;
}
</style>