带 icon 的输入框：slot方式。slot="prefix"和slot="suffix"

一、带有图标标记输入类型

1、官网中使用

代码如下：

<div class="demo-input-suffix">
  slot 方式：
  <el-input
    placeholder="请选择日期"
    v-model="input3">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
  <el-input
    placeholder="请输入内容"
    v-model="input4">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
</div>

2、实际开发中使用

<el-form-item label="菜单图标" prop="icon" :rules="form.type==0?rules.icon:[]">
                    <el-input class="icon-input" :readonly="true" type="text" v-model="form.icon" size="small" clearable
                        align-c="center">
                        <svg-icon slot="prefix" class="svg-icon-M2class" :icon-class="iconName" />
                        <el-link @click="openSelectIcon" slot="suffix" :underline="false" icon="el-icon-s-tools">
                        </el-link>
                    </el-input>
                </el-form-item>

效果如下：