父组件
<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>