Element-UI带图标的输入框

  • 一、实现方法
  • 1. `prefix-icon` 和 `suffix-icon` 属性
  • 2. `i` 组件的 `solt` 形式
  • 3. `el-button` 组件的 `solt` 形式


一、实现方法

看过 官方文档 的同学应该知道有两种方法能够实现该需求。

1. prefix-icon 和 suffix-icon 属性

        prefix-icon 和 suffix-icon 属性能够在 el-input 组件首部和尾部增加显示图标。

<el-form-item label="用户名" prop="username">
	<el-input prefix-icon="el-icon-user" v-model="formData.username"></el-input>
</el-form-item>

        这种方式的优点就是代码量极少，只需要配置一个属性就可以有效果，缺点就是图标不能够配置点击事件。
       既然如此，适合该方式的场景也就一目了然了：单纯用来装饰，增加美观性的场景。例如搜索框的最后可加一个搜索图标，或是用户名输入框前添加一个人员图标。

2. i 组件的 solt 形式

        采用插槽的形式也能够实现该需求。通过设置 solt 的属性值为 suffix 和 prefix 能够控制图标在首部或是尾部显示。

<el-form-item label="用户名" prop="username">
	<el-input v-model="formData.username" prefix-icon="el-icon-search">
		<i slot="prefix" class="el-icon-user" @click="test"></i>
	</el-input>
</el-form-item>

        这种方式的灵活度比第一种要高的多，可以给图标绑定各种不同的事件。
        我遇到的需求是用 input 框实现一个密码框，因为 password 这个关键词是很容易被有心人注意到并遭受攻击的，因此公司不允许使用密码框。在开发过程中我需要在输入框后放置一个小眼睛图标用来充当密码框，并且这个小按钮还得能够点击以切换密码明文密文。也正是这个需求引出了这种方式的缺点：无法在事件中传递自定义参数（也可能是是我水平有限，但我确实尝试了很多网上的办法都没办法传递自定义参数）。

3. el-button 组件的 solt 形式

<el-form-item label="用户名" prop="username">
	<el-input v-model="formData.username" prefix-icon="el-icon-search">
		<el-button slot="suffix" type="text" icon="el-icon-view" @click="showPd('dbNumShow')"></el-button>
	</el-input>
</el-form-item>

        这种方式能够完美的实现我上面的需求，既能够给图标绑定事件，又能够在事件中传递自定义参数，这里的参数可以是字符串，也可以是对象，甚至可以是data中定义的数据，自由度极高，大家自行体会。但要注意，使用这种方式时会带来一个问题，图标的颜色会一直保持蓝色，需要大家自行调整样式。在此贴出我的代码供大家参考。

<style scoped>
.el-button--text {
  color: #606266;
}
.el-button:focus, .el-button:hover {
  color: #409EFF;
}
</style>