vue demand form has units (minutes and seconds, etc. when kg)

Requirements are as follows:

problem analysis:

Because the block elements corresponds with elementui assembly el-input, back unit <span> min </ span> will be pushed down, can not at the same level.

Solution:

Without its components, write their own native, with the class name components, replace el-input__inner as el-input__myinner

  < EL-Item-form   label = "consuming process" >

        < div  class= "el-form-item__content" ></ div >

        < input  type= "text"  class= 'el-input__myinner'  v-model=" form. take_time"  autocomplete= 'off' >

      < span >分 </ span >

  </ el-form-item >

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

.el-input__myinner{

             -webkit-appearance:  none;

             background-color:  #FFF;

             background-image:  none;

             border-radius:  4px;

             border:  1px  solid  #DCDFE6;

             -webkit-box-sizing:  border-box;

             box-sizing:  border-box;

             color:  #606266;

             display:  inline-block;

             font-size:  inherit;

             height:  40px;

             line-height:  40px;

             outline:  0;

             padding:  0  15px;

             -webkit-transition:  border-color  .2s  cubic-bezier( .645, .045, .355, 1);

             transition:  border-color  .2s  cubic-bezier( .645, .045, .355, 1);

             margin-right: 10px;

          }