校验固定电话的2个输入框，一个字段

小咪咪 2023-05-22 06:56 2阅读 0赞

vue中校验固定电话前后的两个输入框，在父页面只允许校验一个字段，

解决方案：可以选择组件传值

![20200416180519140.png][]

这里面 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>

[20200416180519140.png]: /images/20230521/07dcf9dc66c943358f09a1cc420cccdc.png