element ui输入框人民币
时间: 2023-11-05 12:06:07 浏览: 156
Element UI提供了一个非常方便的input输入框组件,可以用于输入各种类型的数据,包括人民币金额。如果需要在输入框中输入人民币金额并添加千分位,可以使用Vue的过滤器来实现。具体实现方法如下:
1. 在Vue实例中定义一个过滤器,用于将输入的数字添加千分位。例如:
Vue.filter('currency', function (value) {
if (!value) return '0.00';
value = parseFloat(value);
value = value.toFixed(2);
var reg = /(\d{1,3})(?=(\d{3})+(?:\.))/g;
return value.replace(reg, "$1,");
});
2. 在HTML部分的input输入框中使用该过滤器。例如:
<el-input v-model="amount" placeholder="请输入金额" :maxlength="10" v-currency></el-input>
其中v-currency是自定义指令,用于调用上面定义的过滤器。
3. 在Vue实例中定义自定义指令v-currency,用于调用上面定义的过滤器。例如:
Vue.directive('currency', {
inserted: function (el) {
el.addEventListener("keyup", function () {
var value = el.value.replace(/\,/g, '');
el.value = value.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
el.dispatchEvent(new Event('input'));
})
}
});
这个自定义指令会在输入框中输入数字时自动调用过滤器,将输入的数字添加千分位。
阅读全文