element-ui 中 el-input框右侧添加单位

最新推荐文章于 2024-07-05 15:01:37 发布
最新推荐文章于 2024-07-05 15:01:37 发布
阅读量7k 收藏 13
点赞数 7
分类专栏： el-input 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ajia0601/article/details/115219628
版权
本文展示了如何使用`suffix`和`prefix`属性来在前端输入框中添加尾部和头部元素，例如在`el-input`组件中添加货币符号。示例代码分别演示了如何在输入框后部添加'元'字（suffix）和在前部添加'元'字（prefix），通过调整样式实现视觉上的完美对齐。
摘要由CSDN通过智能技术生成

示例代码如下：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" style="margin-left: 10px;">元</i>
</el-input>

在这里插入图片描述

大龄少女
关注
  • 7
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-input-number 输入框添加单位
King Saj
04-26 4187
/ 针对带有 data-unit 属性且 class 包含了 "el-input-number--small" 的 el-input-number 元素的样式修改，目的是使该元素的样式与普通的 el-input-number 元素相同。// 针对带有 data-unit 属性的 el-input-number 元素的样式修改。// 是在 el-input-number 元素后面添加一个带有单位文本的伪元素，该伪元素显示 data-unit 属性的值，并通过 CSS 设置该伪元素的位置、颜色和样式等。
vue3+Element Plus项目中给el-input-number组件增加数字单位显示
TM
12-15 919
【代码】vue3+Element Plus项目中给el-input-number组件增加数字单位显示。
vue el-input输入框设置固定前缀字符串
最新发布
qq_634380940的博客
07-05 418
el-input输入框设置固定前缀字符串
实现el-input-number数字框带单位
weixin_45313351的博客
11-20 1024
实现的效果展示，可以是前缀单位，也可以是后缀单位。实现的思路就是动态修改伪元素 ::before 和 ::after 的 content值。
el-input-number 添加单位
weixin_45609659的博客
09-14 1683
el-input-number添加单位
el-input-number 如何添加单位
前端笔记——放弃很容易,但坚持一定很酷
06-13 5382
如何在 el-input-number 的文本框后面添加单位
el-input-number中添加单位(css版)
ju__ju的博客
04-19 2489
elementui,el-input-number
ElInputNumber 添加单位
qq_25211081的博客
12-30 4343
ElInputNumber 添加单位
el-input 输入框里插入单位
weixin_50606255的博客
05-18 1730
代码如下： <el-input v-model="fullForm.releaseTime"> <i slot="suffix" style="font-style: normal; margin-right: 10px">秒</i> </el-input> 效果如下：
el-input 后面加单位
cmmboy1990的博客
12-27 4670
解决： <el-input placeholder="请输入占地面积" v-model="dataFormList.area"> <i slot="suffix" class="dw">亩</i> </el-input> .dw{ font-style:normal; color: #000000; font-weight: bold; line-height: 45px; } 效果： ...
element-ui.rar element-ui核心库压缩包
12-20
这里的 `el-button` 是 Element UI 中的按钮组件，`type="primary"` 表示按钮的类型为主色按钮。 除了基础组件，Element UI 还提供了一些高级功能，如表单验证、动态表单生成、弹窗服务等。例如，使用 Element UI ...
Element InputNumber计数器的使用方法
10-15
主要介绍了Element InputNumber计数器的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue element-ui实现input输入框金额数字添加千分位
11-27
在util.js中定义方法 包含金额添加过滤千分位，验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,"); return str.length > 1 && str[1] ? `${n1}.${str[
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
因此，需要对后端返回的响应数据进行处理，将需要的字段转换为形如`{value: '输入建议'}`的对象，然后将这些对象添加到新的数组中，供`<el-autocomplete>`使用。 例如，如果后端返回的数据中包含`dev_eui`字段，...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
el-input输入框加单位（元）
afdgdf的博客
01-17 1603
el-input输入框后缀加单位‘元’
el-input-number 里面加单位后缀
应公子的专栏
10-14 1092
【代码】el-input-number 里面加单位后缀。
elementUI输入框后面带有单位
weixin_42132044的博客
11-04 2849
添加 slot=“append” <el-input style="width: 180px" placeholder="请输入" clearable > <template slot="append">元</template> </el-input> 示例图
el-element input input事件
10-19
el-element 是一个基于 Vue.js 的 UI 组件库，其中 input 组件是用来接收用户输入的组件。而 input 事件是在用户输入时触发的事件，可以通过监听该事件来获取用户输入的内容。 例如，在 el-input 组件中，可以通过 @input 监听 input 事件，如下所示： ``` <el-input v-model="inputValue" @input="handleInput"></el-input> ... methods: { handleInput(value) { console.log(value); // 输出用户输入的内容 } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值