Vue3.x 环境下el-input实现输入框右侧加icon或字符

最新推荐文章于 2024-06-06 17:27:47 发布
最新推荐文章于 2024-06-06 17:27:47 发布
阅读量4.1k 收藏 7
点赞数 4
分类专栏： 前端 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiyuzz/article/details/121500436
版权

最近帮朋友做点东西，写了个vue的项目。

写表单的时候需要输入框显示单位，这个上网查了一下，<i slot>这种在3.x已经不能使用了，所以查阅了一下element官方文档，element当然也有相关更新。话不多说直接上图，如果想找详细使用方法直接看链接

 

可以看到原先能直接用slot的地方，现在要使用template才行，由于在网上查了好久也都是过时的解决方案，所以写下这篇文章，希望能帮助到更多的人吧

 

yiyuzz
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Element 利用Tooltip提示框实现动态显示文字提示
weixin_44283571的博客
09-28 9460
利用element的提示框来实现动态显示循环的数据，效果图如下： 这里的四个项都是通过循环数组来展示出来的，需要用Tooltip提示框将代码包裹起来就可以达到此效果，代码如下： HTML: <div v-for="(item,index) in choice" :key="index" class="equipmentname center2"> <i class="el-icon-circle-close" style="margin:0 10px 0 1
新版element-plus图标全局导入及在input标签内部插入图标
qq_41961383的博客
04-27 2748
新版element-plus图标全局导入 首先安装新版图标库 npm install @element-plus/icons-vue 其次在全局配置main.js里面添加以下代码 // 统一导入el-icon图标 import * as ElIconModules from '@element-plus/icons-vue' const app=createApp(App) // 统一注册el-icon图标 for(let iconName in ElIconModules){ app.compo
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
前端element组件库中el-input密码右侧添加小眼睛切换状态
在写作的路上持续输出。
06-06 3847
el-input 右侧添加小眼睛【隐藏与显示密码】
el-input-number添加单位
最新发布
m0_62799628的博客
06-06 224
【代码】el-input-number添加单位。
在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现)
m0_50207524的博客
04-07 4218
官方文档在el-input中可以通过 prefix-icon（首部）和 suffix-icon（尾部） 属性在 input 组件增加显示图标，也可以通过 slot 来放置图标。
elementUI 输入框添加小图标
晚星的博客
04-22 3507
1.只需要添加prefix-icon="iconfont icon-xxx"即可（头部插入） <el-input prefix-icon="iconfont icon-sousuo" v-model="searchTableInfo" placeholder="请输入姓名" style="width:240px" ></el-input> 2.添加suffix-icon=“iconfont icon-xxx”（尾部添加） <el-input suffix
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
12-29
基于element-ui 组件 开发的vue.js项目， 实现回车键发起搜索，和原生的input 标签使用方法不一样： el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件，可以直接用@keyup.enter <el ...
vue-input-tag：Vue.js 2.0输入标签组件
02-06
Vue输入标签 一个受启发的Vue.js 2.0输入标签组件 安装 NPM /纱线 npm install vue-input-tag --save yarn add vue-input-tag 然后，您需要导入并注册它： import InputTag from 'vue-input-tag' Vue . component...
3.（vue3.x+vite）el-tree组件（数组结构数据转树结构数据）.rar
09-22
在Vue 3.x和Vite的开发环境中，`el-tree`组件是Element Plus库中的一个常用组件，用于展示树形结构的数据。这个压缩包文件"3.（vue3.x+vite）el-tree组件（数组结构数据转树结构数据）.rar"显然包含了一个关于如何将...
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!...
VUE3+element plus在el-input上增加图标
nopyramid的博客
11-25 1555
在VUE3+element plus要使用:prefix-icon="Search"​，其中Search图标要单独引入。VUE2+elemenUI使用prefix-icon="el-icon-search"​。和VUE2+elementUI有差别。
vue使用element-ui的input框如何加上小图标
HouMengFei_的博客
05-15 4114
element的input框如何加上小图标 1.在input框前面加上小图标 在标签内部加上refix-icon属性 prefix-icon="iconfont el-icon-search" 2.在input框后面加上小图标 在标签内部加上suffix-icon属性 suffix-icon="iconfont el-icon-search" ...
怎么实现点击左侧的el-table，右侧el-input输入框出现内容
guapilixianghe的博客
06-28 865
1，左侧el-table的结构 2，右侧el-input绑定的数据 3，return部分 4，发起查询的请求，将结果返回到tableData中 5，利用el-table绑定的@current-change="handleCurrentChange"将el-table的数据展示到输入框中 6，总结 虽然el-table中我只写了name，sex和age，而右侧的el-input多余了一个国籍nationality，但是只要查询的sql中写了国籍，el-table就会存有这个
02 elementui input与input-number
Q10Viking's Blog
03-05 3240
el-input-number(计数器) input-number的特点是只允许输入数字，如果有max，min设置，用户输入的数字不在这个范围，或者是，我们需要给出用户一条提示信息，告诉用户输入不正确，而change事件的触发条件是当输入的数字与其现有的数字不同时，才会触发此条件： 1. 用户输入统一数字不会触发change； 2. 用户输入的时数字，但是超出了范围，input-number会自动...
element UI表格中设置文字提示（tooltip）或弹出框（popover）
weixin_45932157的博客
04-12 5500
文档中有两种写法：1、使用 slot=“reference” 的具名插槽，2、使用自定义指令v-popover指向 Popover 的索引ref。也就是说content属性是一行，而且不支持自定义，可以使用具名slot来给文字提示设置内容。用具名 slot 分发content，替代tooltip中的content属性。在表格中自定义内容的时候需要使用标签，否则无法正常显示。这里使用的第一种，ref我太清楚所以没用。
vue基础内容总结（十一）
zzk00007的博客
10-02 258
表单输入绑定 基础用法 你可以使用 v-model 指令在表单 <input> 、<textarea>、<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-module 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 注意：v-model 会忽略所...
重读vue电商网站4之登录页面总结使用 iconfont 给输入框添加图标
qq_41632427的博客
06-02 229
vue
elementui和vue前端新增文本框控制输入的字符并且提示
m0_59168984的博客
04-01 3325
elementui和vue前端新增文本框控制输入的字符并且提示
vue2 el-input 输入框后面加个按钮 怎么写
05-31
您可以使用 Element UI 的 `el-input` 组件，然后在 `append` 或 `prepend` 插槽中添加一个 `el-button` 组件即可。 示例代码如下： ```html <el-input placeholder="请输入内容"> <template slot="append"> <el-button>按钮</el-button> </template> </el-input> ``` 这样就可以在 `el-input` 输入框后面添加一个按钮了。您可以根据需要选择 `append` 或 `prepend` 插槽，来决定按钮是在输入框前面还是后面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值