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;
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值