Vue 2.6中vue-currency-input插件使用报错求助

问题背景 #

在Vue 2.6.12中尝试集成vue-currency-input插件，已知Vue 2.6及更早版本需使用该插件的2.x版本，并搭配@vue/composition-api。

已执行操作 #

1. 安装依赖

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

2. 在main.js中注册Composition API

import Vue from "vue";
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);

3. 创建CurrencyInput.vue组件

<template>
  <input ref="inputRef" type="text" />
</template>

<script>
import { useCurrencyInput } from "vue-currency-input";

export default {
  name: "oCurrencyInput",
  props: {
    value: Number,
    options: Object,
  },
  setup(props) {
    const { inputRef } = useCurrencyInput(props.options);

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

4. 在App.vue中使用组件

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

<script>
import CurrencyInput from './CurrencyInput'

export default {
  name: 'App',
  components: { CurrencyInput },
  data: () => ({ value: 1234 })
}
</script>

遇到的警告 #

WARNING  Compiled with 5 warnings                                                                                                                                          10:02:52 PM
 warning  in ./node_modules/vue-currency-input/dist/index.mjs

"export 'computed' was not found in 'vue'

 warning  in ./node_modules/vue-currency-input/dist/index.mjs

"export 'getCurrentInstance' was not found in 'vue'

 warning  in ./node_modules/vue-currency-input/dist/index.mjs

"export 'ref' was not found in 'vue'

 warning  in ./node_modules/vue-currency-input/dist/index.mjs

"export 'version' was not found in 'vue'

 warning  in ./node_modules/vue-currency-input/dist/index.mjs

"export 'watch' was not found in 'vue'

无效的尝试 #

修改组件引入@vue/composition-api的方式，但问题未解决：

<template>
  <input ref="inputRef" type="text" />
</template>

<script>
import { useCurrencyInput } from "vue-currency-input";
import { ref, reactive } from "@vue/composition-api";

export default {
  name: "oCurrencyInput",
  props: {
    modelValue: value,
    options: Object,
  },
  setup(props) {
    const { inputRef } = ref(useCurrencyInput(props.options));

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

有效解决方案 #

1. 安装正确版本的vue-currency-input #

当前安装的是3.x版本，不兼容Vue 2.6，需卸载后安装2.x版本：

npm uninstall vue-currency-input
npm install vue-currency-input@2.x

2. 修复CurrencyInput组件 #

• Vue 2.6中v-model对应prop为value，而非modelValue；
• useCurrencyInput返回的inputRef无需额外用ref包裹；
• 需通过监听数值变化触发input事件，实现v-model双向绑定。

修改后的组件代码：

<template>
  <input ref="inputRef" type="text" />
</template>

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

export default {
  name: "oCurrencyInput",
  props: {
    value: Number,
    options: Object,
  },
  setup(props, { emit }) {
    // 传入初始值和配置项
    const { inputRef, numberValue } = useCurrencyInput({
      ...props.options,
      value: props.value
    });

    // 监听数值变化，同步到父组件
    watch(numberValue, (newVal) => {
      emit("input", newVal);
    });

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

3. 确认main.js配置 #

保持原有@vue/composition-api的注册代码不变，确保全局生效。

完成以上步骤后，即可解决导出警告，并正常使用vue-currency-input的货币输入功能。

内容的提问来源于stack exchange，提问作者Jota Pardo