我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
el-input 只能输入数字和小数
饿了么的input组件只是在v-modal绑定的时候有一个.number
修饰符,使用这个修饰符确实可以只输入数字,但是输入的是整数,无法输入小数,而且字符串还是可以输入,还可以负数,很尴尬。
如果只想让它输入数字,小数,甚至更复杂的判断,上面的方式是不行的。
网上的处理方式
<el-input-number v-model="num" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
大概就是给他添加一个老版本的事件,行内事件进行replace替换,这种方式可行,但是如果方法里面的代码过多,就很尴尬。
我的方式
<el-input-number v-model="num" @input.native ="onNumber($event)"></el-input>
我是给他绑定一个vue的书写事件,如果你需要event对象,就必须使用native修饰符,如果不需要,可以不写。
参数
vue的数据是双向绑定的,所以,最好的方式就是能够直接去修改绑定的数据,而不是去修改input的value值,但是不管是string还是number,他们都不是引用类型,所以几遍你传入了绑定的值,那也只是值,你修改这个值,并不能改到源数据。
所以我的想法是,将源数据设为一个对象{}
,一般来说,form表单绑定的值都是某一个对象下面的值,所以我们直接把这对象作为参数传给他,并且把这个input绑定的对应的键值的key名也作为参数传入
<template>
<el-input-number v-model="form.number" @input="onNumber(form,'numbner')"></el-input>
</template>
<script>
export default {
data(){
return {
form:{
number:""
}
}
},
methods: {
onNumber(row, prop){
let value = row[prop].replace(/[^\d.]/g, "");
if (Number(value) > 10) {
value = 10;
}
row[prop] = value;
}
}
}
</script>
这样写,一个比较完美的判断就有了,我们修改的是源数据,数据不用管input的显示,因为他双向绑定了,只有源变了,他也就变了。
我知道可能会有人这样想
<template>
<el-input-number v-model="form.number" @input.native="onNumber($event)"></el-input>
</template>
<script>
export default {
data(){
return {
form:{
number:""
}
}
},
methods: {
onNumber(event){
let value = event.target.value.replace(/[^\d.]/g, "");
if (Number(value) > 10) {
value = 10;
}
event.target.value = value;
}
}
}
</script>
为什么不只用event对象去修改呢,使用这种方式,虽然input的value值变了,但是他并没触发双向绑定,也就是说,input的值改了,但是你绑定的源数据还是原来你输入的值。
所以,最佳实践,还是我那种方式,修改源数据。
0
评论(0)