利用element-ui封装地址输入的组件

　　我们前端做项目时，难免会遇到地址输入，多数情况下，我们都是提供一个省市三级联动，加上具体地址输入的Input输入框给用户，用以获取用户需要输入的真实地址。在需要对用户输入的数据进行校验的时候，我们会单独针对省市的三级联动和具体地址栏单独校验。也基本上能够完成项目需求。

　　然而当我们转向vue+element做项目时，会产生一个比较尴尬的问题。在element组件库当中，对需要校验的字段是通过在el-form-item这一组件标签名上添加prop属性来校验的，如果依然按照以前的方法对省市联动和地址栏分别校验的话，就得把省市选择和地址输入分成两个el-form-item组件内蓉来写，我们可以看一下，实际形成的布局。

　　

　　这就比较难受了，用户本来也就是需要输入个地址，我们提供给用户级联选择器的目的是方便用户进行省市区的选择，然而现在的情况确是，用户必须进行二次验证。

　　转换思路，用户也可以把两栏并成一栏，展示会比较好看一点。

　　

　　这么来看布局似乎没问题了，但是另一个问题又产生了，element本省提供的校验方案是通过el-form-item的属性prop对用户传入的参数进行校验。

　　也就是说prop必须是字符串，那么这时候，就没办法对两个字段同时校验了，唯一的方案似乎就变成了：把这两个字段变成一个对象，通过自定义校验方法来校验该对象内的数据的值。类似于：

address:{
    district:[],
    address:''
}

　　在el-form-item上写上prop='address'，然后自定义校验方法，通过validator进行校验。

　　想法已经完成了，那么如果项目当中不仅仅一处用到地址输入的话，我们是不是就有必要对该组件进行封装，让他成为我们的常备组件之一了。

　　好吧！那就开始封装组件了。

　　我们的组件封装的仅仅是级联选择器和Input输入框，并不包含校验规则，毕竟是还有其他需要校验的组件。

　　组件的内容可能就很简单了。

　　一个.vue文件， template：

<el-row
    :gutter="16"
    type="flex"
    justify="space-between"
  >
    <el-col :span="12">
      <el-cascader
        v-model="dis"
        :options="regionData"
        @change="handleAddressChange"
        style="width: 100%"
        filterable
      />
    </el-col>
    <el-col :span="12">
      <el-input
        v-model="address"
        placeholder="请输入地址"
        @change="handleChange"
      />
    </el-col>
  </el-row>

　　script：

　　

import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
export default {
  name: 'VAddress',
  props: {
    value: {
      type: Object,
      default () {
        return {
          address: '',
          areaCity: '',
          areaCode: '',
          areaDistrict: '',
          areaProvince: ''
        }
      }
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data () {
    return {
      dis: [],
      regionData,
      mapLabel: TextToCode,
      mapCode: CodeToText,
      ...this.value
    }
  },
  methods: {
    handleChange (e) {
      let val = {
        ...this.value,
        address: this.address
      }
      this.$emit('update:value', val)
      this.$emit('change', val)
    },
    handleAddressChange (values) {
      console.log(values)
      const b = ['areaProvince', 'areaCity', 'areaDistrict']
      if (values.length > 0) {
        let initialValue = {
          ...this.value,
          'areaProvince': '',
          'areaCity': '',
          'areaDistrict': '',
          'areaCode': values[values.length - 1]
        }
        const val = values.reduce((acc, curret, index) => {
          let value = this.mapCode[curret]

          return {
            ...acc,
            [b[index]]: value
          }
        }, initialValue)
        this.$emit('change', val)
        // sync更新
        // this.$emit('update:value', val)
      }
    },
    getCurrentRegion (val) {
      let address = val
      if (!Array.isArray(val) && typeof val === 'object') {
        let { areaProvince, areaCity = '', areaCode } = val
        address = [this.mapLabel[areaProvince], this.mapLabel[areaCity], areaCode]
        if (address.some(item => item === undefined)) address = []
      }
      return address
    },
    initDis (val) {
      this.dis = this.dis.length === 0 ? this.getCurrentRegion(val) : this.dis
    }
  },
  created () {
    if (this.regionData.length > 0 && this.value.areaCode) {
      this.initDis(this.value)
    }
  },
  watch: {
    value: {
      handler (val) {
        this.address = val.address
        if (this.regionData.length > 0) {
          this.initDis(val)
        }
        if (Object.values(val).every(item => !item)) this.dis = []
      },
      deep: true
    }
  }
}

　　需要注意的一个是：

model: {
    prop: 'value',
    event: 'change'
}

　　具体解释请转到vue.js官方文档，我只简单说一句，就是提供给组件使用时绑定v-model，因为v-model默认传递的是value属性，处理的是input事件，而通过在子组件定义model属性，我们就可以修改v-model处理的事件和传递的属性。因为很正常，我们这里有两个form表单控件的内容，肯定没办法依赖v-model的input事件进行处理。如果实在不喜欢这种写法，也可以在组件使用时，避开v-model的用法，转而通过:value.sync进行属性传递，在事件处理是通过this.$emit('update:value', val)来进行类似处理，这也就是看起来没有v-model那么牛X一样，其实结果是一致的。

　　我们在组件内分别对级联选择器和Input输入框做change事件处理，从而获取到最新的数据，转换成使用该组件的父组件内，关于级联选择器的change事件，依赖于各个公司后台开发人员需要前端传回什么样的数据，进行处理。

　　我们的项目当中，后台需要省市区的数据格式为areaProvince, areaCity, areaDistrict, areaCode，所以在级联选择器change的时候，我需要及时的将其获取到的数组（省市区的code值），转换成对应的具体的省份、城市、区，加上区的areaCode，然后传递给后台，具体的得依赖项目需求各自处理。

　　这是vue+element的地址输入的组件封装，后面还会有一个react+antd关于地址输入的组件封装，相较于element，antd提供了自定义form表单控件的功能，所以封装起来也就更容易一点，也更容易理解。