el-input输入框的那些事

原创已于 2023-10-24 14:05:22 修改

· 496 阅读

0 ·

版权

文章标签：

#vue.js #前端 #javascript #1024程序员节 #elementui

于 2023-07-16 10:27:36 首次发布

Element-Plus 专栏收录该内容

10 篇文章

订阅专栏

在Vue3结合Element-Plus的项目中，可以设置el-input的resize属性为none来禁止文本域的自由拉伸。对于输入框，可以利用onkeyup事件和正则表达式，实现在用户输入时仅允许数字，并自动过滤其他字符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3+element-plus+ts+es6

此帖只为记录开发中遇到的需求，技术问题，坑

- - 1、文本域禁止自由拉伸
  - 2、输入框只能录入数字，输入其它字符替换成空串

1、文本域禁止自由拉伸

el-input有一个枚举类型的resize属性，控制拉伸，‘none’ | ‘both’ | ‘horizontal’ | ‘vertical’，默认可高度自由拉伸，若想禁止拉伸，设置为none。
在这里插入图片描述

<el-input v-model="form.text" type="textarea" :rows="3" resize="none" />

2、输入框只能录入数字，输入其它字符替换成空串

									<el-input
										v-model="scope.row.cargoQty"
										onkeyup="value=value.replace(/^\.+|[^\d.]/g,'')"
										placeholder="请输入"
										style="border: 1px solid #f0f2f5"
									/>