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

最新推荐文章于 2024-07-23 17:49:07 发布
原创 最新推荐文章于 2024-07-23 17:49:07 发布 · 4.7k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #前端

这篇博客主要介绍了在 Vue 3.x 中，如何应对&lt;islot&gt;被弃用的情况。作者指出，现在需要使用`<template>`来替代原先的`<islot>`。通过分享自己的搜索经历和查阅Element官方文档，作者希望帮助开发者找到最新的解决方案，解决在Vue 3中处理表单单元显示的问题。

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

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

 

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

 

Vue - 最新详细实现点击按钮（笔图标）可编辑 input 输入框，点击文字内容后变成 ＜input＞ 输入框同时能修改和取消、删除（详细示例代码，一键复制运行）
🏆 前端领域优质创作者
07-06 9271
本文将提供给您一个健壮且代码注释详细的组件源码，无样式只写了核心功能，您直接复制，然后按照自己的需求去更改样式与逻辑，如下图所示：这样的基础示例，更有利于您进行修改和学习！打开文件夹，在里面建立一个文件，复制以下代码。 使用示例 随便找个页面，运行起来。 SEO vueinput实现点击按钮文字增删功能，关于vue点击对输入框进行编辑相关内容,包含vue点击对输入框进行编辑，vue点击编辑按钮后页面变成input输入框，Vue实现点击表格单元格出现输入框，失去焦点隐藏输入框功能，利用vue插
elementUI --- el-select 下拉框右侧放提示文字
Embrace924的博客
04-08 8158
需求： 1.下拉框右侧需要显示对于备注文字 <el-select v-model="ruleForm.tableName" placeholder="请选择数据表" @change="changeDataTable" popper-class="step-one"> <el-option v-for=...
element UI表格中设置文字提示（tooltip）或弹出框（popover）
weixin_45932157的博客
04-12 6178
文档中有两种写法：1、使用 slot=“reference” 的具名插槽，2、使用自定义指令v-popover指向 Popover 的索引ref。也就是说content属性是一行，而且不支持自定义，可以使用具名slot来给文字提示设置内容。用具名 slot 分发content，替代tooltip中的content属性。在表格中自定义内容的时候需要使用标签，否则无法正常显示。这里使用的第一种，ref我太清楚所以没用。
element-ui 中 el-input框右侧添加单位
ajia0601的博客
03-25 7717
示例代码如下：suffix属性在 input 尾部 <el-input v-model="username" class="w200"> <i slot="suffix" style="margin-right: 10px;">元</i> </el-input> 示例代码如下：prefix属性在 input首部 <el-input v-model="username" class="w200"> <i slot="prefix" st
el-input后面加文字
Chuk
05-29 2135
【代码】el-input后面加文字。
el-input 标签中密码的显示和隐藏功能的实例代码
10-16
具体到代码实现，首先需要在Vue实例的data属性中定义一个变量，比如passw，用来表示当前输入框的状态（密码或文本），以及一个变量icon，用来存储当前应该显示的图标。 在el-input标签中，可以通过v-model指令将...
3. el-input：输入框组件的各个属性
08-07
### el-input 输入框组件属性详解 `el-input` 是 Element UI 提供的一个基础输入组件，用于创建文本输入框。它支持多种属性，可以灵活地控制输入框的行为和外观。以下是对 `el-input` 常用属性的详细说明。 #### `...
vue触屏项目 使用 虚拟键盘组件，通过js给el-input value赋值，v-model绑定值不同步问题（已修改）
蓝胖子的博客
08-24 3848
vue触屏项目 使用 虚拟键盘组件，通过js给el-input value赋值，v-model绑定值不同步问题（已修改）
el-input输入框
最新发布
09-11
首先，用户的问题是关于el-input输入框的使用方法及相关特性。用户提到参考了站内引用，但这些引用只是示例，我应该基于上一次的对话和我的知识来回答。 回顾系统级指令： - 所有行内数学表达式使用 `$...$` 格式。...
vue2中el-input输入框加上记忆搜索
01-01
为了在 Vue2 项目中为 Element UI 的 `el-input` 输入框添加记忆搜索功能，可以按照如下方式构建： #### 安装依赖库 确保已经安装了必要的包，比如 Element UI 和 Axios（用于模拟数据请求）。如果尚未安装这些包，...
怎么实现点击左侧的el-table，右侧el-input输入框出现内容
guapilixianghe的博客
06-28 1052
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就会存有这个
一行内的多行文本(input右侧的一行或多行文本)
潇蓝诺依的博客
01-23 3033
样式 方法一 : flex 整体flex布局，解释说明文字也是flex布局 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;
在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现)
m0_50207524的博客
04-07 7387
官方文档在el-input中可以通过 prefix-icon（首部）和 suffix-icon（尾部） 属性在 input 组件增加显示图标，也可以通过 slot 来放置图标。
vue3.0+ElementPlus el-input元素文本框内图标不显示
一花一世界
07-23 988
使用vue3.0+elementplus开发前端webapp应用，在写登录界面时遇到元素文本框内图标不显示问题，通过摸索和不断试错最终得到了解决。
Vue3实现element的input输入时的icon图片的绑定事件
LiYan18j的博客
06-21 1264
所以可以通过自定义插槽的方式来实现，所以我们需要手动添加图标，并使用插槽提供的方式来绑定事件。可是发现 :suffix-icon="Search"无法直接绑定事件。最初我想要实现给图标设置一个点击事件。
Vue.js 实现动态修改带icon的input样式
慧香一格的专栏
04-20 948
/ 添加类名，修改样式。
vue3项目中el-input内搜索的icon图标绑定点击事件
lindaboniu的博客
07-17 2583
el-input v-model="searchData.schoolName" placeholder="搜索学校">-- vue3图标使用方式 -->找了那么多的解决方案，就是下面这个可以，关键在于用component。
vue3自定义input组件
放风喽的博客
08-15 2284
一、前言 这是表单组件的一部分，但现在不知道不知道如何与其他组件互动，所以只是一个简单的input组件 二、代码 时间：2021年8月15日14:54:21 <template> <div class="w-full h-full flex flex-col justify-between items-center"> <div v-if="type!=='textarea'" class="w-full flex-1 flex justify-between it
vue中输入框引用图标的方法
m0_63577432的博客
03-25 1019
1.若是element-ui 则使用 prefix-icon="Search" 直接引用。:prefix-icon="Search" 来进行引用，并添加引用。2.若是element-plus则进行输入。注：使用前要先配置好main.js噢。希望能对你有所帮助~
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值