如何基于element-ui封装一个长尾词金额输入框组件？

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

在日常生活中，我们常会遇到这样的场景：在一个表单中，需要用户输入金额，并校验金额的格式。这种需求您一定遇到过，但现在，我们还需要做到的是：当用户离开输入框（失去焦点）时，进行金额格式的校验。

在日常的迭代开发中通常我们会遇到这样的场景：在一个表单中需要用户输入金额，并校验金额的格式。这个需求你一定遇到过，但是现在，我们还需要做到：当用户离开输入框（失去焦点）时，输入的内容变成了用逗号每隔 3 位分隔的数字，并展示给用户。且最后提交金额时，参数的值仍然是正常数字，不包含逗号。

遇到这种需求，我们首先要想到「表单中的金额输入框」是常见到的功能。既然是常见的功能，我们要将它抽象封装起来，做到随时可用于任何表单中，用一行代码代替重复作业。

像表单项一样，我们需要给组件传递 label，绑定值的 key，placeholder 用于展示在表单中；还需要传递整个 form 对象，表单的 rules 进来。另外，考虑到需要给一个遮罩层展示格式化后的金额，我们还需要传递 width 决定遮罩层宽度。