Vue.directive('thousandInput', {
// 指令的定义
inserted: function (el, binding) {
// 指令作用在 element-input 节点,对应原生 div.el-input (真实input节点的父节点)
if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
el = el.getElementsByTagName('input')[0]
}
// 带¥符号、保留2位小数+千分位
// el.value = (Number(el.value)).toLocaleString('zh', {style:'currency', currency: 'CNY', minimumFractionDigits: 2});
// 保留2位小数+千分位
el.onblur = (e) => {
if (!el.value) return 0
el.value = parseFloat(el.value).toLocaleString('en-US', { 'minimumFractionDigits': 2, 'maximumFractionDigits': 2 })
}
el.onfocus = (e) => {
if (!el.value) return 0
const str = el.value.replace(/,/g, '')
el.value = parseFloat(str)
}
if (!el.value) return 0
el.value = parseFloat(el.value).toLocaleString('en-US', { 'minimumFractionDigits': 2, 'maximumFractionDigits': 2 })
}
})
v-thousandInput使用自定义指令,不使用v-model做双向数据流动,保持m层的数据不变,直接修改v层,vm层也监听不到。实现了视图层展示带千分位的字符串,而发送给后端的数据仍然为数值。
还使用到了一个很好用的方法,toLocaleString。