vuejs输入witdh掩码新钱

Posted 2023-02-23

【中文标题】vuejs输入witdh掩码新钱

【英文标题】：vuejs input witdh mask new money

【发布时间】：2021-10-23 05:46:54

【问题描述】：

我是 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>

【问题讨论】：

看看npmjs.com/package/vue-currency-input，它有很多选项，在保持良好用户体验的同时进行掩蔽并不是简单的几行

它不能做我想做的事。我在问题中添加了我想要做的图像。

删除逗号后的零对我来说是个问题

例子：100,00 她改正结果是 100

如果您使用正确的选项，则不会：imgur.com/a/vlY5Qx2

【参考方案1】：

- 要求-

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

@input @focus @blur

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

- 进程-

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

- 代码沙盒 -

> Here you can see the concept in action <

【参考方案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 了解更多选项。

【讨论】：

那么，我不能把它写在组件中而不是绑定吗？

不确定您的意思，我已链接到有关如何使用它的文档，那里有一个使用自定义组件的示例dm4t2.github.io/vue-currency-input/…

我使用的和这里一样，但是我想定义“props options”而不是````:options=" currency: 'GBP' " ```。 link

传递道具:options="options", codesandbox.io/s/…

我不想这样做，而是要制作主要组件选项。 "CurrencyInput.vue"