帶 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>

效果如下：