在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>复制