vue中校验固定电话前后的两个输入框,在父页面只允许校验一个字段,
解决方案:可以选择组件传值
这里面 input组件默认接受的值叫做——————props:{value}
子组件向父组件用$emit方法传值———————input,将分割成的两个值组成一个值默认传给父组件中的那个值“telephone”
父组件中
<el-col :span="12">
<el-form-item label="固定电话:" prop="telephone">
<telephone-input v-model="addForm.telephone"></telephone-input>
</el-form-item>
</el-col>
子组件中
<template>
<el-row>
<el-col :span="4">
<el-input v-model="areaCode"></el-input>
</el-col>
<el-col :span="2" class="line">
<span>-</span>
</el-col>
<el-col :span="18">
<el-input v-model="phoneCode"></el-input>
</el-col>
</el-row>
</template>
<script>
export default {
name: 'telephone-input',
props: {
value: {
type: String,
default: ''
}
},
computed: {
areaCode: {
get: function () {
if (this.value) {
let numberArr = this.value.split('-')
if (numberArr.length) {
return numberArr[0]
} else {
return undefined
}
}
},
set: function (newValue) {
this.$emit('input', newValue + '-' + this.phoneCode)
}
},
phoneCode: {
get: function () {
if (this.value) {
let numberArr = this.value.split('-')
if (numberArr.length) {
return numberArr[1]
} else {
return undefined
}
}
},
set: function (newValue) {
this.$emit('input', this.areaCode + '-' + newValue)
}
}
},
methods: {}
}
</script>
<style scoped>
.line {
text-align: center;
line-height: 30px;
}
</style>