vue金额单位自动换算输入框

介绍

在vue前端项目开发的过程中，经常会遇到后端使用的金额单位是“分”，而用户输入的金额单位是“元”，就会需要在获取数据跟提交数据的时候手动对数据做计算，显得比较繁琐，代码结果也比较乱，所以可以封装一个组件来完成单位的转换

el-input-number也可换成自己项目中使用的其他组件

新建文件 “PriceInput.vue”

<script setup>

const modelValue = defineModel("modelValue", {
  set: (v) => {
    if (!v) {
      return v
    }
    return v * 100
  },
  get: (v) => {
    if (!v) {
      return v
    }
    return (parseFloat(v) / 100)
  }
})

</script>

<template>
  <el-input-number v-model="modelValue" v-bind="$attrs"/>
</template>

<style scoped lang="less">

</style>

使用案例

双向绑定的金额为“分”，组件实际展示和编辑的金额单位为“元”，与el-input-number组件完全兼容

 <price-input v-model="form.price"  :precision="2" :step="0.1" :min="0"  controls-position="right" />

如果觉得有用，还请帮忙点点赞