vue在input框后面添加单位

原创 已于 2024-06-03 21:30:05 修改 · 4.3k 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #javascript #elementui
于 2023-03-13 16:38:22 首次发布
这段代码展示了在Vue.js应用中使用ElementUI库创建的一个行(row)内包含两个列(col)，分别用于输入大米的重量(KG)和体积(m³)。每个输入框都配备了占位符和后缀单位，利用v-model进行数据绑定。 
<el-row >

        <el-col style="width: 48%">
          <el-form-item label="大米" prop="screenrow"  >

              <el-input v-model="form.screenrow" placeholder="请输入重量" >
                <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">KG</i>
              </el-input>


          </el-form-item>


        </el-col>
        <el-col style="width: 48%; ">

          <el-form-item label="体积" prop="screencol"  >

              <el-input v-model="form.screencol" placeholder="请输入体积" style="margin-left: 15px">
                <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">m³</i>
              </el-input>

          </el-form-item>
        </el-col>
        </el-row>

951e892bc4eb473f9519862ec7a8f2a1.png

 

 

el-input-number 输入框添加单位
King Saj
04-26 5464
/ 针对带有 data-unit 属性且 class 包含了 "el-input-number--small" 的 el-input-number 元素的样式修改，目的是使该元素的样式与普通的 el-input-number 元素相同。// 针对带有 data-unit 属性的 el-input-number 元素的样式修改。// 是在 el-input-number 元素后面添加一个带有单位文本的伪元素，该伪元素显示 data-unit 属性的值，并通过 CSS 设置该伪元素的位置、颜色和样式等。
vue项目固定文字和输入框的组合表单输入
蚂蚁搬砖我砌墙
06-12 2403
上面就是根据单选框的值来切换公司名称的输入格式，这种固定文字和输入框的组合我姑且称之为半输入模式。一、PC端（使用element-ui组件）二、移动端（使用vant移动组件）下面是具体的前端代码（
el-input-number 添加单位
weixin_45609659的博客
09-14 2077
el-input-number添加单位
如何在input框中加文字（单位）
热门推荐
梁小茹的博客
12-15 1万+
看图 prefix:前面加 suffix：后面加 <el-form-item label="车辆载重" :label-width="formLabelWidth"> <el-input v-model="form.name" placeholder="请输入" autocomplete="off" > <
el-input 后面加单位
cmmboy1990的博客
12-27 5240
解决： <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; } 效果： ...
el-input输入框加单位（元）
afdgdf的博客
01-17 2719
el-input输入框后缀加单位‘元’
el-input-number 如何添加单位
前端笔记——放弃很容易,但坚持一定很酷
06-13 7797
如何在 el-input-number 的文本框后面添加单位
若依 element 框架vue中在input框后面添加单位后缀，以及截取字符串
qq_22905801的博客
10-12 629
【代码】若依 element 框架vue中在input框后面添加单位后缀。
el-input后面加单位，el-table每列加单位
weixin_44807017的博客
12-17 4893
el-input后面加单位，el-table每列加单位 el-input后面加单位 <el-input v-model="editForm.length"> <i slot="suffix" style="font-style:normal;margin-right: 10px;">cm</i> </el-input> el-table每列加单位 <el-table-column align="center" label="楼栋号"&gt
el-input-number中添加单位(css版)
ju__ju的博客
04-19 2746
elementui,el-input-number
elementUI输入框后面带有单位
weixin_42132044的博客
11-04 3104
添加 slot=“append” <el-input style="width: 180px" placeholder="请输入" clearable > <template slot="append">元</template> </el-input> 示例图
在input框的后面添加一个单位
web
10-30 8018
结果为： 代码 <input type="text" /> <span style="position: absolute; top: 0; right: 0; display: table-cell; white-space: nowrap; padding: 7px 10px;">万元</span> 样式可以在style里调整 参考：https://www.cnblogs.com/Linlearn/p/11393042.html ...
input 框后面带单位、提示
Raywh的博客
12-13 1万+
css .input-group { position: relative; display: table; border-collapse: separate; width: 100%; } .input-group .form-control, .input...
ElInputNumber 添加单位
qq_25211081的博客
12-30 5090
ElInputNumber 添加单位
Element plus 如何在el-input输入框内加单位
前端小陈的成长记录
03-13 1010
Element plus el-input 输入框内加单位
vue3+Element Plus项目中给el-input-number组件增加数字单位显示
TM
12-15 1464
【代码】vue3+Element Plus项目中给el-input-number组件增加数字单位显示。
el-input设置后缀显示单位并阻止滚轮微调
最新发布
weixin_46394325的博客
09-11 1262
el-input显示单位，并设置type为number时阻止滚轮的默认行为造成微调
element-ui的input加单位符号
Yangpengxunb的博客
03-03 1104
【代码】element-ui的input加单位符号。
实现el-input-number数字框带单位
weixin_45313351的博客
11-20 2241
实现的效果展示，可以是前缀单位，也可以是后缀单位。实现的思路就是动态修改伪元素 ::before 和 ::after 的 content值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值