在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现)

在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现

前言1、vue2中使用在input中使用属性添加对没有prefix-icon和suffix-icon属性的标签如：el-select，使用slot方式添加 2、vue3+element-plus中使用

前言

官方文档
在el-input中可以通过 prefix-icon（首部）和 suffix-icon（尾部） 属性在 input 组件增加显示图标，也可以通过 slot 来放置图标。如下图：

1、vue2中使用

在input中使用属性添加

<div class="demo-input-suffix">  <el-input    placeholder="请选择日期"    suffix-icon="el-icon-date"    v-model="input1">  </el-input>  <el-input    placeholder="请输入内容"    prefix-icon="el-icon-search"    v-model="input2">  </el-input></div><script>export default {  data() {    return {      input1: '',      input2: ''    }  }}</script>

对没有prefix-icon和suffix-icon属性的标签如：el-select，使用slot方式添加

<div class="demo-input-suffix">  <el-input    placeholder="请选择日期"    v-model="input1">    <i slot="suffix" class="el-input__icon el-icon-date"></i>  </el-input>  <el-input    placeholder="请输入内容"    v-model="input2">    <i slot="prefix" class="el-input__icon el-icon-search"></i>  </el-input></div><script>export default {  data() {    return {      input1: '',      input2: ''    }  }}</script>

      <template slot="menuLeft">        <el-select v-model="deviceDataId" filterable size="small" @visible-change="deviceVisibleChange" @change="deviceSelectChange" placeholder="请选择设备生成图表">            <template slot="prefix">              <span style="padding: 5px;line-height: 33px;font-size: 18px; color: #409eff;">                <i class="el-icon-s-data"></i>              </span>            </template>            <el-option v-for="item in devOptions"              :key="item.deviceId"              :label="item.deviceName"              :value="item.deviceId">            </el-option>        </el-select>      </template>

2、vue3+element-plus中使用

<el-input v-model.trim="forms.username" v-focus :placeholder="translateTitle('请输入用户名')" tabindex="1" type="text"><template #prefix><el-icon :size="size">    <User />        </el-icon></template><template #suffix>        <el-icon :size="size" @click="handlePassword">            <View />         </el-icon>     </template></el-input>

本文链接：https://www.kjpai.cn/news/2024-04-03/153129.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！