开发避坑指南(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>

或者进一步简写