Element UI中的图标

1、vue是现今比较流行的前端框架了,目前,使用比较多的就是Element UI,为了页面的美观程度,我们每个前端页面大多都会使用一下图标,下面介绍一下图标的使用。如有需要,可参考官网:

Element UI中的图标_第1张图片

2、举个简单的例子,我们编写一个input框,在框后端添加一个搜索的图标,代码如下所示:


          
               
          
          
               查询
          

 如上图代码所示,我们在input框后端添加了一个搜索的图标,使用的方法就是输入框尾部图标suffix-icon="图标名称",如果是要输入框前端图标则是prefix-icon="图标名称",而在button按钮中我们直接使用了图标属性icon="图标名称",所以,想要使用什么样的图标,一定要清楚图标名称是什么样的,便可以直接使用了。

3、图标名称及图标。

Element UI中的图标_第2张图片

Element UI中的图标_第3张图片 Element UI中的图标_第4张图片

Element UI中的图标_第5张图片

Element UI中的图标_第6张图片

Element UI中的图标_第7张图片

Element UI中的图标_第8张图片

Element UI中的图标_第9张图片

Element UI中的图标_第10张图片

Element UI中的图标_第11张图片

 以上是Element ui2.15.6版本下的图标和图标名称,如果您使用的是其他版本的Element,请参考Element官网文档,地址是:Element - The world's most popular Vue UI framework

 路漫漫其修远兮,吾将上下而求索,希望此篇文章对大家有所帮助......

 

你可能感兴趣的:(Vue,ui,前端,vue.js)