如何改写Vue自定义指令，使其仅允许输入数字和浮点数？

本文共计1892个文字，预计阅读时间需要8分钟。

在开始讨论本篇主题之前，先思考几个问题：

1.使用HTML元素属性type='number'是否可以满足需求？

2.Vue中指令一般被设计用来操作DOM元素的，而Vue视图是基于数据模型的，如何同时操作DOM？

再开始本篇的讨论之前，先思考几个问题：

使用html元素属性type='number'是否可以满足要求

Vue中指令一般被设计用来操作dom元素的，而vue视图是基于数据模型的，如何在操作dom的同时，同时更新数据

你定义的指令不能只能在input元素上使用，还要支持在其父元素上使用，自定义组件及第三方组件上使用

你的指令是不是支持局部作用域，比如for循环渲染的数据的单元item，如何识别这个item进行数据更新和dom操作

如何控制字符数目，超出禁止输入

如何实现全局性的功能定义，从而在各个子组件中灵活使用

还有没有别的优化替代方案

问题思考

可以肯定的是，针对方案1，答案是：可以。很明显，它只会作为我们此次讨论的一个噱头罢了！为什么呢？因为这种处理方案有兼容性，不说别的，拿谷歌和火狐浏览器对比来看：谷歌浏览器表现堪称完美，而火狐浏览器表现就狠差强人意。而且会衍生出各种各样的问题。这里不再赘述，有兴趣的可以自己试试看

针对方案6，不是本次讨论的重点，但是思路方向很重要。比如使用vue的状态管理机制库vuex来解决这个数据流转的问题是不是可以！这里只是一个方向，感兴趣的同学可以去调研一下。

实现方案

Vue允许我们来定义全局指令，从而在各个子组件中使用。那我问题6我们解决了。