el-input千分位显示
时间: 2023-11-07 07:55:43 浏览: 150
给数字添加千分位分隔符.md
el-input的千分位显示可以通过自定义指令来实现。在Vue中,可以使用自定义指令来操作元素的DOM。根据提供的代码,可以看出该指令的实现思路是在输入框失焦时展示千分号,并在聚焦时将格式化后的数字转换为原始数字。
具体实现步骤如下:
1. 创建一个自定义指令,命名为thousands。
2. 在指令的inserted钩子函数中,获取输入框的元素节点。
3. 判断如果获取到的是input节点,则直接操作该节点。否则,获取该节点下的第一个input节点。
4. 使用toLocaleString方法将输入框的值格式化为千分位形式,并设置小数位数为两位。
5. 在输入框聚焦时,将去除千分号的值转换为数字格式,并保留两位小数。
6. 在输入框失焦时,将格式化后的值再次转换为千分位形式,保留两位小数,并赋值给输入框的value属性。
阅读全文