vue中输入框引用图标的方法

1.若是element-ui 则使用 prefix-icon="Search" 直接引用

<el-input prefix-icon="Search" v-model="phone" style="font-size: 12px;width: 200px;margin-left:10px;height: 32px"  placeholder="请输入电话查询" />

2.若是element-plus则进行输入  

:prefix-icon="Search" 来进行引用,并添加引用
import {Search} from "@element-plus/icons";

<el-input :prefix-icon="Search" v-model="username" style="font-size: 12px;width: 200px;height: 32px"  placeholder="请输入用户名查询" />

希望能对你有所帮助~

注:使用前要先配置好main.js噢

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ElementUI输入框的样式可以通过修改类样式来实现。可以使用自定义的类样式来修改输入框的样式,也可以通过样式穿透来修改原本的类样式。 如果要使用自定义的类样式来修改输入框的样式,可以按照以下步骤进行操作: 1. 在`<style>`标签定义一个自定义的类样式,比如`.input_border`,并设置`border-radius`属性为30px。 2. 在`<el-input>`组件使用`:class`属性将自定义的类样式应用到输入框上,例如`:class="input_border"`。 3. 这样就可以通过自定义的类样式来修改输入框的样式了。 如果要通过样式穿透来修改原本的类样式,可以按照以下步骤进行操作: 1. 在`<style>`标签使用`/deep/`或`>>>`选择器来穿透样式,例如`/deep/.el-input__inner`或`>>> .el-input__inner`。 2. 在穿透的选择器设置需要修改的样式属性,比如`background-color`、`color`和`border`等。 3. 这样就可以通过样式穿透来修改输入框的样式了。 需要注意的是,以上的方法适用于ElementUI的输入框组件,对于其他ElementUI组件也可以采用类似的方式进行样式修改。 #### 引用[.reference_title] - *1* [Vue修改element-ui库的输入框样式--样式穿透](https://blog.csdn.net/qwqc262/article/details/119806712)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [(Select)解决:Element-ui Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化...](https://blog.csdn.net/weixin_43405300/article/details/124534512)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [elementUI输入框组件 样式自定义 高度、圆角、边距调整 图标跟随](https://blog.csdn.net/qq_36640955/article/details/105597473)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值