vant中输入框右侧加icon或单位或label下面加一行提示语
van-field变为双标记可以在右侧加icon图标或单位或label下面加一行提示语
(1)输入框右侧加icon图标
<van-form>
<van-field
v-model="detailInfo.coverableCities"
type="text"
label="覆盖城市"
required
placeholder="请选择可覆盖城市(可多选)"
:rules="rules.coverableCities"
@focus="coverableCitiesObj.coverableCitiesShow = true">
</van-field>
<van-icon name="arrow" color="#999" size="1.2rem" />
</van-form>
效果:
(2)输入框在右侧加单位
<van-form>
<van-field
v-model="detailInfo.zwCount"
type="number"
label="车位展位数量"
required
placeholder="请输入车位展位数量">
</van-field>
<span class="unit">个</span>
</van-form>
效果:
(3)label下面加一行提示语
<van-form>
<van-field
v-model="detailInfo.lesson"
type="text"
label="合作车辆品牌"
label-class="lesson"
required
placeholder="请输入合作车辆品牌">
</van-field>
<span class="label-lesson">
(擅长车辆价格范围,若曾有包店,经销商供应商或主机厂供应商服务经验请填写)
</span>
</van-form>
效果:
css部分:
.van-form {
position: relative;
}
.van-form .van-cell {
padding: 0;
flex-direction: column;
margin-top: 1.5rem;
}
.van-form .van-cell::after {
border-bottom: none;
}
.van-form .van-cell__title {
width: 100%;
margin-bottom: 1rem;
}
.van-form .lesson {
height: 5.2rem;
}
.van-form .van-cell__title span {
font-size: 1.3rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-left: 0.5rem;
}
.van-form .van-cell--required::before {
left: 0;
}
.van-form .van-cell__value .van-field__body input,
.van-form .van-cell__value .van-field__body textarea {
font-size: 1.2rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.4rem;
height: 3.2rem;
box-sizing: border-box;
padding: 0rem 1rem;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.van-form .van-cell__value .van-field__body textarea {
height: 10rem !important;
}
.van-form .van-cell__value .van-field__body input:focus,
.van-form .van-cell__value .van-field__body textarea:focus {
border-color: #002fa7 !important;
}
.form-padding .van-cell__value .van-field__body input {
padding: 0rem 2.5rem 0rem 1rem;
}
.van-popup .van-cell__title {
width: 94%;
flex: unset;
}
.van-form .van-icon {
position: absolute;
top: 3.8rem;
right: 0.5rem;
}
.unit {
position: absolute;
top: 4rem;
right: 1rem;
font-size: 1.2rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.label-lesson {
position: absolute;
top: 2.2rem;
left: 0rem;
font-size: 1rem;
font-weight: 400;
/* zoom: 0.9; */
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}