-
- <el-input-number
- v-model="row.money"
- v-thousands
- :controls="false"
- :min="0"
- :precision="2"
- style="width: 100%"
- />
-
- // 添加全局指令或局部指令
- directives: {
- thousands: {
- inserted: function (el) {
- // 获取input节点
- if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
- el = el.getElementsByTagName('input')[0]
- }
-
- // 初始化时,格式化值为千分位
- const numberValue = parseFloat(el.value.replace(/,/g, ''))
- if (!isNaN(numberValue)) {
- el.value = numberValue.toLocaleString('zh', {
- minimumFractionDigits: 2,
- maximumFractionDigits: 2,
- })
- }
-
- // 聚焦时转化为数字格式(去除千分位)
- el.onfocus = () => {
- el.value = parseFloat(el.value.replace(/,/g, '')).toFixed(2)
- }
-
- // 失去焦点时转化为千分位
- el.onblur = () => {
- const onBlurValue = parseFloat(el.value.replace(/,/g, ''))
- if (!isNaN(onBlurValue)) {
- el.value = onBlurValue.toLocaleString('zh', {
- minimumFractionDigits: 2,
- maximumFractionDigits: 2,
- })
- }
- }
- },
- },
- },
实现效果为获取焦点时显示数值,失去焦点显示千分位,获取v-model绑定的值为数值。如果想设置数值靠右显示,添加局部css:
- ::v-deep .el-input-number .el-input__inner {
- text-align: right;
- }