elementui input怎么加小图标 掘金

基于vue框架，使用element-ui组件库写表单效果，需要添加字体小图标，效果如下：

1.只需要添加prefix-icon="iconfont icon-xxx"即可（头部插入）

//例如

<el-input

prefix-icon="iconfont icon-sousuo"

v-model="searchTableInfo"

placeholder="请输入姓名"

style="width:240px"

></el-input>

1

2

3

4

5

6

7

2.添加suffix-icon=“iconfont icon-xxx”（尾部添加）

//例如

<el-input

suffix-icon="iconfont icon-sousuo"

v-model="searchTableInfo"

placeholder="请输入姓名"

style="width:240px"

></el-input>

添加icon 图标要保证图标是*.ico的格式。让后添加资源->导入，图标就会添加到Icon这个文件夹里了，至于大于256色只是不能显示，照样可以使用。这个没关系的。你所讲的添加后自动加到位图资源里面应该是图标格式不对.希望能够帮到你.

矩形、文本、图片（作为产品图标使用，没有也可以）、输入框、账号/密码icon。

了解登录界面的布局以及各种元素，用户在 *** 作时需要有哪些反馈，怎么做体验较好，本次内容先按基础的做法为你展示，学完相信你会做出更好的交互原型。

下面开始剖解制作步骤……

先用矩形画一个手机界面，尺寸为375*667；·制作界面的状态栏、顶部栏，把顶部栏的文本元素补上去（这些没有可以在公众号输入“移动端元件库”）。

用矩形画出两个输入框的长、宽度，设置圆角（图中尺寸为280*40、圆角2）；再放置一个文本框，设置文本提示文案；设置手机号输入框文本长度为13（后面做讲解），密码输入框长度为20（控制密码最长的长度）；·最后再用矩形、文本作为按钮，分别放置：登录、注册、忘记密码（不清楚的看图）。

·给两个输入框背景添加交互样式“选中的”效果，然后设置输入框“获取焦点时”设置背景为选中（true），“失去焦点时”设置背景为取消选中（false）。

·在添加手机号输入框中添加一个“清空”icon，设置用例“文本改变时”条件：文本框文本长度≥1时，显示“清空”icon，否则隐藏。同时设置清空按钮用例“鼠标单击时”，清空文本框的值。

为密码栏做一个密码显示/隐藏功能，首先找到显示/隐藏的两个icon，然后两个icon分别放在一个动态面板的两个状态里（默认隐藏）。同时密码的输入框也需要做一个动态面面板，两个状态一个显示、一个隐藏（默认隐藏），点击显示/隐藏时，切换密码输入框的显示状态。

设置点击登录按钮时会有各种场景如：手机号为空、密码为空、手机号或密码错误、登录成功。把四个toast放在一个动态面板内（默认隐藏），使用用例“鼠标单击时”分别有四个case，不同场景显示不同的toast提示。

做完以上的步骤基本上已经可以完成一个登陆界面的高保真交互原型了，下面再来了解一下进阶部分……

如果已经做完以上的步骤，可以还尝试做以下还有可以优化的地方。如手机号11位数的自动分段（344的格式），还有账号输入框输入完11位数后，自动换行到输入密码栏……尝试做一下。

在手机号输入框设置用例“文本改变时”，该输入框的值为以上函数，同学可以直接复制：[[This.text.replace(‘ ‘,”).substr(0,3).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(3,4)).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(7)).trim()]]·

前面已经设置好元件文字长度，现在此处就不要再设置了。

完成，来看一下效果案例链接： https://fm3meu.axshare.com

Donny，微信公众号：UE_diary，人人都是产品经理专栏作家。工作两年多的产品交互设计师，不定分享一些产品交互细节。

题图来自Unsplash，基于CC0协议

---