自定义Vue指令实现el-input格式化为保留两位小数

最新推荐文章于 2024-06-21 16:09:03 发布

王明鹏

最新推荐文章于 2024-06-21 16:09:03 发布

阅读量2.9k

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/cfnwmp/article/details/123739388

版权

<template>
  <el-input v-twoNum v-model="value1">
  </el-input>
</template>
<script>
  export default {
    data() {
      return {
        value1: ''
      }
    },
    directives: {
      twoNum: {
        update: function(el) {
          const ele = el.getElementsByTagName('input')[0]
          ele.addEventListener('input', function() {
            let val = ele.value
            //两位小数正则表达式
            let temp = val.toString();
            temp = temp.replace(/。/g, ".");
            temp = temp.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
            temp = temp.replace(/^\./g, ""); //验证第一个字符是数字
            temp = temp.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的
            temp = temp.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            temp = temp.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
            ele.value = temp;
          })
        }
      }
    }
  }
</script>