Vue 输入的时候只能输入整数，不能输入小数，怎么解决呢？

Question

Vue 输入的时候只能输入整数，不能输入小数，怎么解决呢？
我看淘宝的键盘是

我现在是

input属性type的 numter 和 tel我这里是一样的

<input type="number" value="0" @input="handel($event)" size="1" v-model.number="num" >
<input type="tel" value="0" @input="handel($event)" size="1" v-model.number="num" >

tel，在浏览器中没有效果了和上面一样 可以种英文切换
在qq里面扫出来是这样的，但是在浏览器里面打开就不对了，这是为啥

这个键盘框不是很好啊 还能切换中文之类的 我就只想输入数字，小数点都不要 怎么把输入框和淘宝的类似呢？

Answer 1

可以全局注册一个自定义指令，然后在标签上使用这个指令：

Vue.directive('number',{
    inserted(el,binding,vnode){
        el.oninput= function(e){
            let value = e.target.value;
            if(isNaN(value)){
                vnode.context.num = e.target.value = '';
                return;
            }
        }
    }
})
//html
<input type="number" value="0" @input="handel($event)" size="1" v-model.number="num" v-number />

这样就不能输入特殊符号，中文了，只能输入整数数字。

Answer 2

<input type="number" pattern="\d*"> 试试。