- 需求:
输入字符串,每输入13位,自动添加一个空格。(例如输入银行卡号) - 实现
思路:使用el-input组件的input事件,当输入值改变时进行添加空格处理,然后再赋给双向绑定值。
代码:
- el-input组件
<el-input v-model="data" maxlength="41" @input="handleChange" placeholder="请输入字符串"/>
- input事件的处理方法
handleChange () {
this.data = this.data.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{13})(?=\d)/g, '$1 ')
this.$set(this.data, 'cn39', this.cn39)
}
注:将13修改为其他数字,实现每隔N位加一个空格