美文网首页
vue el-input-number千分符指令

vue el-input-number千分符指令

作者: 辉色星空下 | 来源:发表于2023-07-27 15:28 被阅读0次

    聚焦时正常显示,失焦时千分符显示

    Vue.directive("thousand", {
      // 被绑定元素插入父节点时调用
      inserted: function(el) {
        // 获取input节点
        if (el.tagName.toLocaleUpperCase() !== "INPUT") {
          el = el.getElementsByTagName("input")[0];
        }
        // 千分位
        el.value = parseFloat(el.value).toLocaleString("zh", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        });
        // 聚焦转化为数字格式(去除千分位)
        el.onfocus = e => {
          let a = el.value.replace(/,/g, ""); //去除千分号的','
          el.value = parseFloat(a).toFixed(2);
        };
        el.onblur = e => {
          el.value = parseFloat(el.value).toLocaleString("zh", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
          });
        };
      }
    });
    

    相关文章

      网友评论

          本文标题:vue el-input-number千分符指令

          本文链接:https://www.haomeiwen.com/subject/wlnlpdtx.html