【无标题】vue3 PC端中用element-plus组件中的icon布局输入框 搜索放大镜

 

 

1、安装图标库

pnpm install @element-plus/icons-vue
 

2、在使用的vue页面  引入 

import {  Search } from "@element-plus/icons-vue";

3、在vue页面标签中  使用

第一张图片对应代码：

 <el-input v-model="searchData.city" placeholder="请输入">

                <template #append>

                  <el-button

                    :icon="Search"

                    style="color: #fff; background-color: #409eff"

                  >

                    搜索

                  </el-button>

                </template>

              </el-input>
第二张图片对应代码：
 

  <el-input

                v-model="searchData.keyword"

                :suffix-icon="Search"

                placeholder="搜索学校"

              />