首页 > 技术文章 > vue需求表单有单位(时分秒千克等等)

duanhuarong 2019-11-26 11:55 原文

需求如下:

问题分析:

因为用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;
          }

推荐阅读