博客

如果你在使用

element-ui

自定义插件的时候，想保持和

element

风格一致，需要用到输入框，并且里面有

icon

小图标，不需要自己手写样式，可以通过下面2种方法实现

方法1：

<el-form-item label="图标在前">
   <el-input v-model="form.name1" prefix-icon="el-icon-search" />
</el-form-item>
 <el-form-item label="图标在后">
    <el-input v-model="form.name2" suffix-icon="el-icon-date" />
 </el-form-item>

方法2：

<el-form-item label="图标在前">
   <el-input v-model="form.name1">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
</el-form-item>
<el-form-item label="图标在后">
   <el-input v-model="form.name2">
      <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
</el-form-item>

第一种方法说明：


prefix-icon

图标位置在前面


suffix-icon

图标位置在后面


el-icon-search

搜索小图标


el-icon-date

日期小图标

第二种方式是通过

slot

来插入

其他图标还有很多，都是通过伪类添加的，可以看一下源码找一下