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> |