组件输入框纯数字,文本千位分割,只能输入数字小数点,后两位

父组件

<numInput :num="item.a" @putBlur="item.a=change($event)"></numInput>

:num 传递给子组件的值,即你绑定的值
@putBlur 监听子组件传递的值,将传递的参数赋值给绑定的参数名 以便业务进行
用一个地方的话就可以直接在change方法里面赋值给你绑定的参数名
如果多的话就这样写吧 直接每一个绑定参数=方法的返回值

多个组件
<td><numInput :num="item.a" @putBlur="item.a=change($event)"></numInput></td>
<td><numInput :num="item.b" @putBlur="item.b=change($event)"></numInput></td>
 <td><numInput :num="item.c" @putBlur="item.c=change($event)"></numInput></td>
 <td><numInput :num="item.d" @putBlur="item.d=change($event)"></numInput></td>
方法
change(val){
      return val
    }

子组件代码

<!--  -->
<template>
  <div>
      <span v-show="bool" @click="handle">{{num|moneyType}}</span>   //点击事件把接收值赋值给input
      <input v-show="!bool" type="text" ref="tex" v-model="numdata" @blur="sub">  //失去焦点emit发送事件,切换到span
  </div>
</template>

<script>
export default {
  props:['num'],
  data () {
    return {
        bool:true,
        numdata:0,
    }
  },

  components: {},

  computed: {},
  watch:{
    numdata:function(val,oldval){   //监听表单  输入数字小数点两位 如果是空就赋值为0
      this.numdata=this.getnumber(val,oldval,2)
    }
  },
  methods: {
    getnumber(val, oldval, l){
  		var reg2 = /^\d+(\.\d{0,2})?$/
 		 let mum = val
 		 let nmb = l + 1
		  if (!reg2.test(val)) {
	    	mum = parseFloat(val)
	 	 }
	  	if (val[0] === '0' && val[1] !== '.' && val.toString().length > 1) {
 	   		mum = val.replace(/^0+/, '')
  		}
 	 	if (val[0] === '0' && val[1] === '0' && val.toString().length > 1) {
   	 		mum = 0
 		 }
 		 let i = val.toString().indexOf('.')
 	 	if (val.toString().indexOf('.') > 0 && val.toString().length > (val.toString().indexOf('.') + 2)) {
   	 		mum = val.toString().substring(0, i + nmb)
 	 	}
 	 	if (isNaN(val)) {
    		mum = oldval
 	 	}
 		 if (val === '' || val == null) {
   	 			mum = ''
 	 	}
 		 return mum
		}
    },
      handle(){  //点击span 隐藏span 显示input并赋值 dom切换完成令input获取焦点
        this.bool=!this.bool
        this.numdata=this.num
        this.$nextTick(()=>{
          this.$refs['tex'].focus()
        })
      },
      sub(){
        if(this.numdata.toString().indexOf('.')==this.numdata.length-1){  
         //失去焦点如果最后一位是小数点,则弹窗提示并令input获取焦点
          this.$message.warning('小数点后不能为空')
          // this.$nextTick(()=>{
            this.$refs['tex'].focus()
        // })
        }else{ //否则的话切换到span 并发送值给父组件
          this.bool=!this.bool
          this.$emit('putBlur',this.numdata)
        }

      }
  },

  mounted(){}

}
</script>
<style lang='scss' scoped>
span{
  display:inline-block;
  width:110px;
  height:100%;
  text-align:right;
  padding-right:10px;
}
input{
  width:110px;
  border:none;
  height:100%;
  text-align:left;
  padding-left:10px;
}
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值