vue需求表单有单位(时分秒千克等等)

需求如下:

问题分析:

因为用elementui组件 el-input 相当于块级元素,后面的单位<span>分</span>会被挤下去,无法在同一水平。

解决方法:

不用它的组件,自己写个原生的,用组件的class名,替换el-input__inner 为 el-input__myinner

  < el-form-item  label= "处理耗时" >
        < div  class= "el-form-item__content" ></ div >
        < input  type= "text"  class= 'el-input__myinner'  v-model=" form. take_timeautocomplete= 'off' >
      < span ></ span >
  </ el-form-item >

在F12模式下,可以查看 el-input__inner   的样式,将样式复制下来,修改一下就可。

.el-input__myinner{
             -webkit-appearancenone;
             background-color#FFF;
             background-imagenone;
             border-radius4px;
             border1px  solid  #DCDFE6;
             -webkit-box-sizingborder-box;
             box-sizingborder-box;
             color#606266;
             displayinline-block;
             font-sizeinherit;
             height40px;
             line-height40px;
             outline0;
             padding0  15px;
             -webkit-transitionborder-color  .2s  cubic-bezier( .645, .045, .355, 1);
             transitionborder-color  .2s  cubic-bezier( .645, .045, .355, 1);
             margin-right: 10px;
          }

猜你喜欢

转载自www.cnblogs.com/duanhuarong/p/11934520.html