在Vue项目里使用element ui在input框上使用v-model.trim导致输入空格失效
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
在vue项目里使用element ui组件库,你会发现使用element的input框,如果在v-model上加.trim修饰符,得到的内容是去除了前后空白的,但是在输入数据的时候没法按空格键输入空格,这让录数据的人非常难受。分析不能输入空格的原因就是,element的input框不支持v-model.trim的写法,如图:
了解原因以后,想解决去除输入值前后空白又能输入空格的问题就清楚很多了,我现在的写法是这样的,不用修饰符.trim,使用js的trim方法,在el-input的@blur事件中去除首尾空格:
代码:
<el-form-item label="名称:" class="postInfo-container-item">
<el-input
placeholder="请输入内容"
v-model="searchData.name"
@blur="searchData.name=$event.target.value.trim()"
clearable
maxlength="50"
show-word-limit
>
</el-input>
</el-form-item>
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)