创建省市区选择器组件

2023-10-11 05:18:32

一、前言

在mpvue小程序的项目中，我有遇到手动封装一个省市区选择器组件的需求。当时因为时间比较紧，做得不是很好，一直挺遗憾。最近抽了一些时间终于重新把这个组件重新封装了一遍。这篇博客主要介绍一下怎么用、默认选中功能和一些实现的原理。

二、组件使用

这个选择器组件就是一个.vue文件，所有的样式和逻辑都放在了这个文件里。

1. 引入组件

// 在需要使用组件的页面中引入
import mPicker from '@/components/mPicker/mPicker.vue'

// 在components目录下创建mPicker.vue文件

2. 在页面中使用组件

<template>
  <m-picker :data="pickerData" :defaultValue="defaultValue" @change="handleChange" />
</template>

<script>
import mPicker from '@/components/mPicker/mPicker.vue'

export default {
  components: {
    mPicker
  },
  data() {
    return {
      // 省市区数据
      pickerData: [
        {
          name: '北京',
          code: '110000',
          children: [
            {
              name: '东城区',
              code: '110101',
            },
            {
              name: '西城区',
              code: '110102',
            },
          ],
        },
        {
          name: '上海',
          code: '310000',
          children: [
            {
              name: '黄浦区',
              code: '310101',
            },
            {
              name: '徐汇区',
              code: '310104',
            },
          ],
        },
      ],
      // 默认选中值
      defaultValue: ['110000', '110101'],
    }
  },
  methods: {
    handleChange(value) {
      console.log('picker value changed', value)
    },
  },
}
</script>

3. 组件属性

属性	类型	默认值
data	Array	-	省市区数据，格式为数组，数组元素为对象，对象包含name、code、children属性
defaultValue	Array	-	默认选中值，格式为数组，数组元素为字符串，字符串为省市区编码
@change	Function	-	选中值发生变化时触发的事件，回调函数的参数为选中的值，格式为数组，数组元素为字符串，字符串为省市区编码

三、默认选中功能

默认选中功能是指，当组件第一次渲染时，根据defaultValue属性设置的默认值，自动选中对应的省市区。

实现这个功能需要用到组件的created生命周期钩子函数。在created钩子函数中，我们可以获取到组件的props，然后根据props中的defaultValue属性，找到对应的省市区数据，并设置组件的value属性。

export default {
  // 省市区数据
  props: {
    data: {
      type: Array,
      required: true,
    },
    defaultValue: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      value: [],
    }
  },
  created() {
    this.setDefaultValue()
  },
  methods: {
    setDefaultValue() {
      if (this.defaultValue.length === 0) {
        return
      }

      const provinceCode = this.defaultValue[0]
      const cityCode = this.defaultValue[1]
      const districtCode = this.defaultValue[2]

      const province = this.data.find(item => item.code === provinceCode)
      const city = province.children.find(item => item.code === cityCode)
      const district = city.children.find(item => item.code === districtCode)

      this.value = [provinceCode, cityCode, districtCode]
    },
  },
}

四、实现原理

这个选择器组件的核心是使用了一个叫做mPicker的组件库。mPicker是一个非常强大的组件库，它提供了各种各样的选择器组件，比如日期选择器、时间选择器、省市区选择器等等。

省市区选择器组件的实现原理很简单，就是把mPicker组件封装成一个.vue文件，然后在组件内部使用mPicker组件。

1. mPicker组件的使用

<template>
  <mp-picker :data="pickerData" :value="value" @change="handleChange" />
</template>

<script>
import mPicker from 'mp-picker'

export default {
  components: {
    mPicker
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
    value: {
      type: Array,
      default: [],
    },
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value)
    },
  },
}
</script>

2. 省市区数据格式

省市区数据格式是一个数组，数组元素为对象，对象包含name、code、children属性。name属性是省市区的名字，code属性是省市区的编码，children属性是省市区的子级，子级也是一个数组，数组元素也是对象，格式与父级相同。

const pickerData = [
  {
    name: '北京',
    code: '110000',
    children: [
      {
        name: '东城区',
        code: '110101',
      },
      {
        name: '西城区',
        code: '110102',
      },
    ],
  },
  {
    name: '上海',
    code: '310000',
    children: [
      {
        name: '黄浦区',
        code: '310101',
      },
      {
        name: '徐汇区',
        code: '310104',
      },
    ],
  },
]