vue+element的几种输入框

1，

<el-input placeholder="用户名" style="width:100px;margin-left:20px;">

     <i slot="prefix" class="el-input__icon el-icon-search"></i>

</el-input>

2，

<el-input placeholder="用户名" style="width:100px;margin-left:20px;">

       <i slot="suffix" class="el-input__icon el-icon-search"></i>

</el-input>

3，

<el-input placeholder="用户名" style="width:100px;margin-left:20px;">

       <i slot="suffix" class="el-input__icon el-icon-search"></i>

</el-input>

.el-input__inner{

  border-radius: 20px;

}

4，

<el-input placeholder="用户名" style="width:300px;margin-left:20px;">

         <el-button slot="append" icon="el-icon-search"></el-button>

 </el-input>

5，

<el-input placeholder="用户名" style="width:300px;margin-left:20px;">

         <template slot="append">搜索</template>

 </el-input>