在Vue中IView组件全局性地去掉其中输入框中前后空格

最新推荐文章于 2024-06-07 17:17:26 发布
最新推荐文章于 2024-06-07 17:17:26 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： iview 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoyoupp/article/details/115114783
版权

在Vue中是可以通过使用v-model.trim()的方式实现删除单个input输入框中前后空格的功能。然而，我们遇到的问题是可以通过修改其中的某一个js文件来实现整个项目所有input框中去除前后空格的功能，这时候就需要改变相关组件库中调用输入框中值改变的事件(iveiw中的handInput事件)。如下图所示：
在这里插入图片描述
这里我是通过改变iview组件中调用其中Input子组件，输入事件获取到的值，来实现去除前后空格的功能。而要实现这个功能是不能在node_modules中view-design/src目录中相关input.vue文件来实现，必须修改其dist目录中iview.js文件中导出Input模块才能实现:
在这里插入图片描述

Stickers7
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用iview自定义验证关键词输入框问题及解决方法
08-27
在Vue.js应用中，我们经常使用UI库如iView来构建前端界面，其中包括表单验证功能。本篇文章将深入探讨如何在Vue与iView结合的项目中，针对自定义的关键词输入框进行验证，并解决可能出现的问题。 首先，验证需求...
vue组件中点击按钮后修改输入框的状态实例代码
08-30
本例中，我们探讨的是如何在Vue组件中通过点击按钮改变输入框（`<el-input>`）的状态，使其从禁用（disabled）变为可用。我们将分析问题的解决过程，并深入讲解Vue中的相关知识点。 首先，Vue.js提供了双向数据绑定...
iview tag组件和input去除前后空格
chen_vae的博客
12-25 2781
1.tag组件事件调用 tag的默认事件只有关闭时出触发的： on-close事件，当自己定义格式和clic事件时，会出现触发失灵情况，这时就需要用click.native来修饰了 &lt;ul style="display: flex; flex-wrap: wrap; width:auto; padding: 0 20px 0;"&gt; &lt;li v-for="item ...
vue中如何去掉空格的方法实现
11-30
一、问题 vue中当用户提交表单时，有的数据需要去掉前后空格然后再向后端发送。 二、解决方法 首先可以使用v-model.trim这个v-model修饰符去解决它，但是当用户输入\u200B时，这个方法就不奏效了，这时我们可以去一下v-model.trim这个修饰符的源码 function genDefaultModel ( el: ASTElement, value: string, modifiers: ?ASTModifiers ): ?boolean { const type = el.attrsMap.type const { lazy, number, trim }
el-input自动去掉空格，vue项目全局使用
最新发布
m0_46229755的博客
06-07 469
el-input自动去掉空格，vue项目全局使用
iView表单空格验证
yijiupingfan0914的博客
10-08 543
原文链接：https://blog.csdn.net/xianzhuo_sky/article/details/83069603 iView表单组件使用async-validator验证器对表单域中数据进行验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 完整的验证规则请参照开源项目 async-validator。 验证方...
Vue Element 去除input前后空格
conqueror__的博客
12-01 1080
在el-input中可以使用v-model.trim来去除内容中的前后空格
vue去掉所有输入框两边空格，封装指令去空格，支持Vue2和Vue3，ElementUI Input去空格
阿飞
08-08 6142
解决Vue v-model.trim 去空格问题， 让你的Input轻松去掉两边空格，支持原生，支持Element UI 的Input，支持 TextArea, Vue2,Vue3
vue el-input输入框去除前后空格
weixin_45563734的博客
06-15 1191
vue el-input输入框去除前后空格
在Vue组件中获取全局的点击事件方法
10-18
总结起来，对于在Vue组件中获取全局点击事件的需求，推荐使用全局监听事件的方法，它能有效地处理跨组件的交互，并且代码结构清晰。如果有其他更好的解决方案，开发者们可以相互交流，共同提升开发效率和用户体验。
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
IView中的`Tree`组件提供了多种交互方式，包括展开/折叠节点、选择节点以及自定义操作等。 实现节点拖拽功能需要结合Vue的响应式特性与HTML5的拖放API（Drag and Drop API）。首先，在`Tree`节点上设置`draggable`...
input输入框前后去空格：使用v-model.trim
灿灿大王搭建的黄金屋
05-05 5260
介绍v-model的三种修饰符
vue去除字符串前后空格
fu_ycc的博客
07-22 8110
vue去除前后空格 在表单验证里面有时候会验证名字的重复性，但是如果前后有空格，就会显示名字不同，这显然不正确，在这个时候就需要将字符串前后的空格去掉，才能传给后台，下面就来介绍一下vue中去除字符串前后空格的方法。 使用v-model.trim来绑定去除输入字符串的前后空格。 ...
vue 搜索输入框输入空格，禁止输入空格
qq_38181746的博客
03-10 2443
在开发移动端的时候，开发一个搜索功能，输入框中有空格，但是搜索会出问题所以要搜索框中要禁用空格 html <input type="text" v-model="value" placeholder="请输入内容" /> 方法 //禁用空格 isNull(str) { if (str == "") return true; var regu = "^[ ]+$"; var re = new RegExp(regu); return re.test(str); } add
elementui全局去掉输入框前后的空格
weixin_53504747的博客
04-08 2267
1.先创建一个el-components.js文件 import Vue from 'vue' import ElementUI from 'element-ui'; /** * @MethodAuthor: YuanZheLi * @Date: 2022-01-10 15:27:00 * @Description: 统一格式化去除input首尾空格 */ Vue.component('el-input', { extends: ElementUI.Input, created() {
【Vue】去掉输入框等文字输入的首尾空格，保留中间空格
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-08 315
@blur="ruleForm.firstName=$event.target.value.trim()"
iview使用select封装的组件添加filterable属性有空格
小方块的世界
05-22 926
问题： 项目使用vue2.6+iview3.0，其中有一个需求是下拉框能够输入过滤，iview的select有个filterable属性可以实现这个效果。但是加上这个属性后发现选中文字前后都有大量的空格导致选中的条目位置发生了变化。 解决办法： 将option标签中换行导致的空格去掉就好了 <!--修改之前--> <Select v-model='value' filterable> <Option v-for='(dict, index) in dictList'
Vue中去掉表单对象上前后空格
微信公众号: 后端码匠
06-11 2586
实现基于关键字搜索，发现查询到的结果集跟预期不匹配，开发者工具查看相应的请求，发现在请求参数前面多了一个空格，之后就是去掉空格了，vue中去空格只要在该表单对象 的v-model上加trim属性即可 说明：如下代码中使用了vuetify 可以理解为封装的文本框 <el-form :inline="true"> <el-form-item> <el-input v-model.trim="searchForm.name" placehold
vue+iview ui库table组件中添加日期选择器和input输入框
05-31
在iview的Table组件中添加日期选择器和Input输入框可以通过iview的template模板语法来实现，可以参考以下代码： ```html <template> <Table :columns="columns" :data="data"> <template slot-scope="{row, column}"> <div v-if="column.key === 'date'"> <DatePicker :value="row[column.key]" type="date" @on-change="onDateChange(row, column.key, $event)" /> </div> <div v-else-if="column.key === 'input'"> <Input v-model="row[column.key]" @on-change="onInputChange(row, column.key, $event.target.value)" /> </div> <div v-else> {{ row[column.key] }} </div> </template> </Table> </template> <script> import { Table, DatePicker, Input } from 'view-design' export default { components: { Table, DatePicker, Input }, data() { return { columns: [ { title: '日期', key: 'date' }, { title: '内容', key: 'input' }, { title: '备注', key: 'remark' } ], data: [ { date: '2021-08-01', input: '示例1', remark: '备注1' }, { date: '2021-08-02', input: '示例2', remark: '备注2' } ] } }, methods: { onDateChange(row, key, value) { row[key] = value }, onInputChange(row, key, value) { row[key] = value } } } </script> ``` 这里使用iview的DatePicker组件来选择日期，使用Input组件来输入内容，通过在Table组件的template插槽中添加DatePicker和Input组件，可以将选择器和输入框添加到表格的每一行中。 注意，在onDateChange和onInputChange方法中，需要将选择器选中的日期值或输入框输入的值赋值给对应的行数据属性，这样才能实现选择器和输入框的同步更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值