Vue2项目input输入金额自动格式化货币掩码功能失效问题咨询

• Vue 2.6.x 版本的v-model默认绑定的组件属性为value，触发的更新事件为input，你当前子组件声明的modelValue是Vue3的v-model约定属性，在Vue2环境下无法接收到父组件v-model传递的值
• 你封装的子组件只实现了单向值渲染，没有将格式化后的数值回传给父组件的逻辑，因此双向绑定不生效
• vue-currency-input v2及以上版本仅支持Vue3，Vue2环境需要安装v1分支的适配版本

第一步：安装适配Vue2的依赖 #

首先卸载已安装的不兼容版本，再安装对应适配包：

npm uninstall vue-currency-input
npm install vue-currency-input@1 @vue/composition-api

然后在项目入口文件main.js中注册Composition API：

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)
// 其他原有配置保留

第二步：修改子组件tools/CurrencyInput.vue代码 #

<template>
  <input ref="inputRef" :value="formattedValue" />
</template>

<script>
import useCurrencyInput from "vue-currency-input";
import { watch } from '@vue/composition-api'

export default {
  name: "CurrencyInput",
  props: {
    // Vue2的v-model默认传值到value属性，替换原有modelValue
    value: Number,
    options: Object,
  },
  // 第二个参数为上下文，取emit方法用于向父组件传值
  setup(props, { emit }) {
    const { formattedValue, inputRef, value: inputValue } = useCurrencyInput(
      props.options,
      // 传入父组件的初始值
      { initialValue: props.value }
    );

    // 监听输入框数值变化，回传给父组件触发v-model更新
    watch(inputValue, (newVal) => {
      emit('input', newVal)
    })

    // 监听父组件值的变化，同步更新子组件内的输入值
    watch(() => props.value, (newVal) => {
      if (newVal !== inputValue.value) {
        inputValue.value = newVal
      }
    })

    return { inputRef, formattedValue };
  },
};
</script>

如果需要仅在输入框失焦时才触发格式化，可在传入的options中新增配置formatOnBlur: true即可。

第三步：父组件调用简化 #

父组件Person.vue中直接用v-model绑定即可，其余无效写法可删除：

<template>
  <CurrencyInput v-model="value" :options="{ currency: 'EUR', formatOnBlur: true }"/>
</template>

<script>
import CurrencyInput from "../tools/CurrencyInput";

export default {
  components: {
    CurrencyInput
  },
  data() {
    return {
      value: 123456,
    }
  },
}
</script>

内容的提问来源于stack exchange，提问作者Selaminko Elam