原生货币符号替代vue-currency-input

基于 Element Plus 自定义货币金额输入组件

在前端开发中，金额输入是一个常见需求。vue-currency-input 确实是一个不错的库，但在实际长期使用中，会逐渐暴露出一些影响用户体验的小问题。当项目需要更灵活的货币符号控制、更稳定的输入体验时，基于现有组件库自行实现反而是更省心的选择。

vue-currency-input 的典型问题

1. 输入小数点时光标会不受控制地跳动，操作节奏被打断。
2. 货币符号始终固定在输入框左侧，无法放置在右侧。
3. 输入过程中小数点无法显示，用户只能凭记忆判断。
4. 与 Element Plus 的 el-input 组件集成时存在细节对不齐的问题，体验割裂。

针对以上痛点，本文基于 Element Plus 环境自实现一个货币输入组件，将控制权完全掌握在开发者手中。

组件实现：CurrencyInput.vue

使用方法示例

在 index.vue 中引入该组件并绑定 v-model，可灵活配置货币符号位置、精度和取值范围：

实际效果对比

输入框左侧（prefix 模式）

输入框右侧（suffix 模式）

通过自定义实现，不仅解决了原生库的光标跳动、符号位置固定、小数点显示缺失等问题，还能自由控制货币符号在输入框的左侧或右侧显示，用户交互更直观，更符合业务需求。代码量不大，但核心体验的提升立竿见影。

参考文献

• API | Vue Currency Input