purchase/components/listitem/listItem.vue

71 lines
1.1 KiB
Vue

<template>
<view class="item-box">
<slot name="left">
<view class="content">{{label}}</view>
</slot>
<slot name="right">
<view class="opear">
<u-input v-model="valueModel" :clearable="false" type="text" class="input-c"/>
</view>
</slot>
</view>
</template>
<script>
export default {
name: 'listitem',
props: {
value: {
type: [String, Number]
},
label: {
type: String
},
itemIcon: {
type: String
}
},
computed: {
valueModel: {
get () {
return this.value
},
set (val) {
this.$emit('input', val)
}
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.item-box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 0 29rpx;
& .input-c /deep/ input {
color: #FFFFFF;
}
& .input-c /deep/ .input-placeholder {
color: #757896 !important;
}
& .content {
width: 200rpx;
height: 33rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 33rpx;
}
& .opear {
flex: 1;
}
}
</style>