Javascript vue js的数字输入组件

下面是我使用numeric.js的实现：

Vue.filter（'formatNumber'，函数（值）{
返回数字（值）.format（'0,0.[000]”）
})
Vue.组件（'输入编号'{
模板：'\
\
{{label}}\
\
\
',
道具：{
价值：{
},
标签：{
}
},
方法：{
updateValue:函数（inputValue）{
var valToSend=输入值
var numVal=数字（valToSend）.value（）
如果（isNaN（numVal））{
valToSend=this.value.toString（）
numVal=数字（valToSend）.value（）
}
var formattedVal=数字（numVal）.format（'0,0.[000]”）
此.$refs.input.value=formattedVal+（valToSend.endsWith（'.'）？'：''）
此.$emit（'input'，数字（formattedVal）.value（））
},
displayValue:函数（inputValue）{
返回数字（inputValue）.format（'0,0.[000]”）
},
全选：功能（事件）{
//Safari bug的解决方法
// http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
setTimeout（函数（）{
event.target.select（）
}, 0)
}
}
})
var app=新的Vue({
el:“#应用程序”，
数据：{
每格价格：'160000'，
权重为：“1.5”，
},
计算：{
totalPrice:function（）{
返回（this.pricePerGram*this.weightInGrams）
},
toatlWithVat:函数（）{
退货（此价格为1.09*1.09）
}
}
})

总价：{{totalPrice | formatNumber}}

总计+增值税：{{toatlWithVat | formatNumber}}

这应该有效（）：

Vue.component（“输入编号”{
模板：“”，
道具：{
价值：{
类型：字符串，
要求：正确，
}
},
计算：{
型号：{
得到（）{
//我们提取十进制数，因为toLocaleString将自动
//当用户仍在键入时，删除其后面的点和零
设value=this.value.split（“.”）；
设十进制=值[1]的类型！=“未定义”
“？”+值[1]
: "";
返回编号（值[0]）。toLocaleString（“en GB”）+十进制；
},
设置（新值）{
此.emit（“'input'，newValue.replace（/，/g，”））；
}
}
}
});
新Vue({
el:“应用程序”，
数据：{
输入：“1234567.890”，
}
});

您的代码看起来非常干净、有前途。我可以用正则表达式替换“toLocaleString”，但我认为你的方法比我的更干净。谢谢你，伙计。

Vue.component("input-number", {
  template: '<input type="string" v-model="model">',

  props: {
    value: {
      type: String,
      required: true,
    }
  },

  computed: {
    model: {
      get() {
        // We extract decimal number, beacause toLocaleString will automagically
        // remove the dot and zeros after it while the user is still typing
        let value = this.value.split(".");
        let decimal = typeof value[1] !== "undefined"
          ? "." + value[1]
          : "";

        return Number(value[0]).toLocaleString("en-GB") + decimal;
      },

      set(newValue) {
        this.$emit("input", newValue.replace(/,/g, ""));
      }
    }
  }
});

new Vue({
  el: "#app",
  data: {
    input: "1234567.890",
  }
});