实现效果

设置子组件

<template><el-inputref="money"v-model.trim="money":placeholder="placeholder"v-bind="$attrs"v-on="$listeners"@input="formatNumber(money,'money')"@keyup.enter.native="moneyChange()"@blur="moneyChange()"><template slot="append">人</template></el-input>
</template><script>
export default {name: 'MoneyInput',props: {value: {type: null,required: true},placeholder: {type: String,default: '请输入金额'},enterFuc: {type: Function,default: () => {}},data: {type: null,default: null},template: {  //是否展示单位type: String,default: ''}},data() {return {money: this.value,}},watch: {value(newValue, oldValue) {this.money = newValuethis.formatNumber(this.money, 'money')}},mounted() {this.formatNumber(this.money, 'money')},methods: {fmresource(s) {if (s === '' || s === null || s === '.00' || s === undefined) {return ''}if (s === '-') {return '-'}var lose = ''// 负号if (s < 0) { // 判断是否是负数s = (s + '').substring(1)// 截取-号lose = '-'}s = s + ''// n = n > 0 && n <= 20 ? n : 2;.toFixed(n)// s = parseFloat((s + "").replace(/^[^\d.-]/g, "")) + "";var l = s.split('.')[0].split('').reverse(); var r = ''; var t = ''if (s.indexOf('.') > -1) {if (s.split('.')[1] !== null && s.split('.')[1] !== undefined) {if (s.split('.')[1].length > 2) {s = Number(s).toFixed(2)}r = ('.' + s.split('.')[1])} else {r = ''}}for (let i = 0; i < l.length; i++) {t += l[i] + ((i + 1) % 3 === 0 && (i + 1) !== l.length ? ',' : '')}return lose + '' + t.split('').reverse().join('') + r// 拼接},formatNumber(value, name) {this.$emit('update:data', value)value = value + ''// 获取input的dom对象，这里因为用的是element ui的input，所以需要这样拿到const input = this.$refs[name].$el.getElementsByTagName('input')[0]// 获取当前光标的位置const cursorIndex = input.selectionStart// 字符串中光标之前-的个数const lineNumOfCursorLeft = (value.slice(0, cursorIndex).match(/,/g) || []).length// 去掉所有,的字符串const noLine = value.replace(/,/g, '')// 重新格式化const newvalue = this.fmresource(noLine.replace(/[^\d\.-]/g, ''))// .replace(/(\d{4})/g, '$1 ').replace(/ $/, '')// 改后字符串中原光标之前，的个数const newLineNumOfCursorLeft = (newvalue.slice(0, cursorIndex).match(/,/g) || []).length// 光标在改后字符串中应在的位置const newCursorIndex = cursorIndex + newLineNumOfCursorLeft - lineNumOfCursorLeft// 赋新值，nextTick保证-不能手动输入或删除，只能按照规则自动填入this.$nextTick(() => {this.money = newvalue// 修正光标位置，nextTick保证在渲染新值后定位光标this.$nextTick(() => {// selectionStart、selectionEnd分别代表选择一段文本时的开头和结尾位置input.selectionStart = newCursorIndexinput.selectionEnd = newCursorIndex})})},moneyChange() {const v = this.money ? (this.money + '').replace(/,/g, '').replace(new RegExp(/(\d+)(\.)(\d*)(\2*)(\d*)/g), '$1$2$3$5') : 0const money = Object.is(Number(v), NaN) ? 0 : Number(v)this.$emit('input', money)this.enterFuc()}}
}
</script>

在父组件引入

引入组件
import MoneyInput from “./compontents/index”

components: {MoneyInput},

使用

<Money-input v-model.trim="project.hospitalnumber"  template="append" style="width: 100%"></Money-input>

基于Element ui 实现输入框只能输入数字并支持千分位相关推荐

js限制输入框只能输入数字
分享下js限制输入框中只能输入数字的方法,包括整数与小数,分享几个例子,有需要的朋友参考下. 1.使用正则表达式限制输入框只能输入数字: 1 <input type="text&quo ...
input输入框只能输入数字，只能输入字母数字组合
input输入框只能输入数字,字母数字组合,汉字等 input里需要控制输入的类型,可以通过onkeyput或oninput对输入的内容进行校验.输入大小写字母.数字.下划线:onkeyup=&quo ...
要求输入框只能输入数字跟破折号
要求输入框只能输入数字跟破折号让输入框接受像"1234-123456789"这样的数字让输入框接受像"1234-123456789"这样的数字 <a- ...
通过javascri实现输入框只能输入数字
输入框只能输入数字 <input type="text" οnkeyup="value=value.replace(/[^\d]/g,'');"> ...
【 javascript】＜input＞实现输入框只能输入数字（个人认为最好的）
<input> 实现输入框只能输入数字需求背景: 方案一:使用`JS`限制 input 输入框只能输入纯数字方案二:`VUE`使用`a-input-number组件`限制 input ...
控制输入框只能输入数字
1.将input的属性type改为number 2.这时的输入框会有小箭头, 去掉小箭头的方法,给input添加样式 input::-webkit-outer-spin-button,input::- ...
elementUI输入框只能输入数字解决方案
借鉴地址需求描述 1.只能输入数字 2.控制输入11位 3.验证如果不是11位提示错误 4.当输入时取消验证,没有错误提示问题 1.el-input type=number e仍然可以输入,方案p ...
html input输入框只能输入数字只能输入字母数字组合
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
MFC如何让输入框只能输入数字
PS:这是本人第一次写CSDN的博客,以后我都会把笔记记在CSDN上,便于保存.本人也是小白,可能写得不好,勿喷! 假设这个输入框添加一个CString变量叫m_strValue int nLen = ...

基于Element ui 实现输入框只能输入数字并支持千分位

实现效果

设置子组件

在父组件引入

使用

基于Element ui 实现输入框只能输入数字并支持千分位相关推荐

最新文章

热门文章