Element UI中的图标

1、vue是现今比较流行的前端框架了，目前，使用比较多的就是Element UI，为了页面的美观程度，我们每个前端页面大多都会使用一下图标，下面介绍一下图标的使用。如有需要，可参考官网:2、举个简单的例子，我们编写一个input框，在框后端添加一个搜索的图标，代码如下所示：<el-form :inline="true"><el-form-item label="城市:">

太白神龙

27476人浏览 · 2021-11-09 15:59:22

太白神龙 · 2021-11-09 15:59:22 发布

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

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

<el-form :inline="true">
          <el-form-item label="城 市  :">
               <el-input type="text" suffix-icon="el-icon-search" ></el-input>
          </el-form-item>
          <el-form-item>
               <el-button type="primary" size="mini" icon="el-icon-search"     
                 @click="butSearch()">查询</el-button>
          </el-form-item>
</el-form>

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

3、图标名称及图标。