120 lines
2.5 KiB
Vue
120 lines
2.5 KiB
Vue
<template>
|
|
<view class="item" :style="{backgroundColor: props.backColor}" :class="[props.border]">
|
|
|
|
<!-- 左侧内容 即标题 -->
|
|
<view class="title">
|
|
<text v-if="props.start" class="require">*</text>
|
|
<text style="color:#666f80"> {{ props.text }}</text>
|
|
</view>
|
|
|
|
<!-- 右侧内容 父组件替换此插槽，可以转变为上传图片等左右结构的布局 -->
|
|
<slot>
|
|
<input type="text" :value="props.value" @input="onChange" :placeholder="placeholderText" :disabled="props.disabled" />
|
|
</slot>
|
|
|
|
</view>
|
|
<view v-if="props.tipText" class="tipText">
|
|
({{ props.tipText }})
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
value: {type: String, default: ''},
|
|
text: {type: String, default: ''},
|
|
tipText: {type: String, default: ''}, // 自定义的提示文字
|
|
start: {type: Boolean, default: true }, // 代表必填项的小星星
|
|
disabled: {type: Boolean, default: false}, // 是否禁止填写
|
|
backColor: {type: String, default: '#fafbfc'}, // 背景颜色
|
|
border: {type: String, default: 'top-border'}, // border位置 上或下
|
|
tipHolder: {type: String, default: ''} // 自定义placeholder
|
|
})
|
|
|
|
// 自定义placeholder
|
|
let placeholderText = props.tipHolder ? props.tipHolder : `请输入${props.text}`
|
|
|
|
const emit = defineEmits(['update:value'])
|
|
|
|
const onChange = e => emit('update:value', e.detail.value)
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.item{
|
|
box-sizing: border-box;
|
|
//height: 110rpx;
|
|
width: 100%;
|
|
// background-color: #fafbfc;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 35rpx 30rpx 35rpx 30rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #000;
|
|
.title{
|
|
text-align: left;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #666f80;
|
|
margin-right: 20rpx;
|
|
white-space: nowrap;
|
|
}
|
|
input, textarea {
|
|
flex-grow: 1;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
}
|
|
.imgupload{
|
|
position: relative;
|
|
height: 120rpx;
|
|
width: 120rpx;
|
|
background-color: #E6E9ED;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.delate{
|
|
position: absolute;
|
|
top: 70rpx;
|
|
left: -20rpx;
|
|
height: 40rpx;
|
|
width: 40rpx;
|
|
border-radius: 5rpx;
|
|
background-color: #ff0000;
|
|
}
|
|
|
|
}
|
|
|
|
// 星号
|
|
.require {
|
|
width: 20rpx;
|
|
color: red;
|
|
}
|
|
|
|
// 禁止标题换行
|
|
.title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
text {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.top-border {
|
|
border-top: 1rpx solid #e8e8e8;
|
|
}
|
|
.bottom-border {
|
|
border-bottom: 1rpx solid #e8e8e8;
|
|
}
|
|
.tipText {
|
|
margin: 8rpx 20rpx 10rpx;
|
|
color: #808080;
|
|
}
|
|
</style> |