开发避坑指南(26)：Vue3 input输入框前置后 置元素解决方案

需求背景

在Vue3环境中，在输入框的后面或者前面带图标、或者带文本、或者带按钮，该怎么实现？

解决办法

在输入框的后面或者前面带图标、或者带文本、或者带按钮这种输入框通常称为复合型输入框，可前置或后置元素，一般为标签或按钮。

方案1

插槽方式实现。以后置文本为例，如下：

<el-form-item :label="columnLabel('price', '单价')" prop="price">
  <el-input v-model="form.price" :placeholder="showInfo ? '' : '请输入单价'" >
     <template slot="append">人民币</template>
  </el-input>  
</el-form-item>

前面的文章中我们已经讲解过了，Vue3环境中，这种写法会报错误：[vue/no-deprecated-slot-attribute]slot attributes are deprecated，应该用v-slot属性代替，如下:

<template v-slot="append">人民币</template>

但是这种写法还是报错：'append' is declared but its value is never read.正确写法应该是：

<template v-slot:append>人民币</template>

或者进一步简写

<template #append>人民币</template>

方案2

添加属性的方式实现。以前置和后置图标为例，通过在input元素中增加前置元素属性prefix-icon或者后置元素属性suffix-icon实现，比如：

<el-input v-model="formData.orderId" prefix-icon="el-icon-search"></el-input>
<el-input v-model="formData.user" suffix-icon="el-icon-user"></el-input>