vuejs输入witdh掩码新钱

Question

我是 vuejs 的新手，坦率地说我找不到我想做的事情。当我找到它时，它对我不起作用。

我有一个输入，我希望在这个输入中输入的值写入“MONEY”的值，但我无法成功。

示例： 当 1000 写入输入时，当输入退出时 我要写 1,000,00。

"vue": "^2.6.12",

Person.vue

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

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

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

工具/CurrencyInput.Vue

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

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

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

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

Answer 1

- 要求-

实现这一点（没有依赖关系）的最简单方法是远离v-model，而是参考以下手动事件：

• @input
• @focus
• @blur

并通过更静态的:value="value" 方法绑定值本身。这样我们就可以更好地控制输出，而不会受到 vue-magic 的干扰

- 进程-

1. 最初，您希望输入类型为 "text"，因为您希望显示货币的点/逗号符号。
2. 在焦点上，您希望将类型更改为数字并删除逗号/点符号。
3. 在模糊时您想切换回初始显示样式。这是通过使用Intl.NumberFormat 实现的。
4. 在输入时您希望将新值保存到数字参考中。

- 代码沙盒 -

> Here you can see the concept in action <

Answer 2

将vue-currency-input 与以下选项一起使用：

{
    locale: 'nl-NL',
    currency: 'GBP',
    currencyDisplay: 'hidden',
    precision: 2,
    hideCurrencySymbolOnFocus: true,
    hideGroupingSeparatorOnFocus: true,
    hideNegligibleDecimalDigitsOnFocus: true,
    autoDecimalDigits: false,
    exportValueAsInteger: false,
    autoSign: false,
    useGrouping: true
}

输入将被屏蔽如下：

查看docs 和playground 了解更多选项。