uniapp封装一个城市选择器

好的，以下是基于uniapp的城市选择器封装代码：

1. 在components文件夹下新建一个CityPicker文件夹，里面新建CityPicker.vue文件：

<template>
  <div class="city-picker">
    <van-picker
      :columns="columns"
      @change="onChange"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      <template #title>
        <div class="city-picker-header">
          <van-icon name="arrow-left" size="20" @click="onCancel" />
          <span class="city-picker-title">{{title}}</span>
        </div>
      </template>
    </van-picker>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  props: {
    title: {
      type: String,
      default: '选择城市'
    },
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default() {
        return [null, null, null];
      }
    }
  },
  computed: mapState({
    cityData: state => state.city.cityData
  }),
  data() {
    return {
      columns: [
        {
          values: []
        },
        {
          values: []
        },
        {
          values: []
        }
      ],
      currentProvince: '',
      currentCity: '',
      currentDistrict: ''
    };
  },
  methods: {
    initColumns() {
      const { columns } = this;
      const provinceList = Object.keys(this.cityData);
      const province = this.currentProvince || provinceList[0];
      const city = this.currentCity || Object.keys(this.cityData[province])[0];
      const district = this.currentDistrict || this.cityData[province][city][0];
      columns[0].values = provinceList;
      columns[1].values = Object.keys(this.cityData[province]);
      columns[2].values = this.cityData[province][city];
      columns.forEach(column => {
        column.defaultIndex = 0;
      });
      this.currentProvince = province;
      this.currentCity = city;
      this.currentDistrict = district;
    },
    onChange(picker, value) {
      const { cityData, columns } = this;
      const province = columns[0].values[value[0]];
      const city = columns[1].values[value[1]];
      const district = columns[2].values[value[2]];
      if (cityData[province][city].indexOf(district) === -1) {
        columns[2].values = cityData[province][city];
      }
    },
    onConfirm() {
      this.$emit('input', [
        this.currentProvince,
        this.currentCity,
        this.currentDistrict
      ]);
      this.$emit('confirm', [
        this.currentProvince,
        this.currentCity,
        this.currentDistrict
      ]);
    },
    onCancel() {
      this.$emit('cancel');
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.initColumns();
      }
    },
    columns: {
      deep: true,
      handler(val) {
        const { cityData } = this;
        const province = val[0].values[val[0].defaultIndex];
        const city = val[1].values[val[1].defaultIndex];
        const district = val[2].values[val[2].defaultIndex];
        if (cityData[province][city].indexOf(district) === -1) {
          val[2].values = cityData[province][city];
          this.currentDistrict = cityData[province][city][0];
        }
        this.currentProvince = province;
        this.currentCity = city;
        this.currentDistrict = district;
      }
    }
  }
};
</script>

<style scoped>
.city-picker {
  height: 300px;
  overflow: hidden;
}

.city-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.city-picker-title {
  font-weight: bold;
  font-size: 16px;
}
</style>

2. 在store文件夹下新建一个city.js文件，里面写入城市数据：

export default {
  state: {
    cityData: {
      北京市: {
        北京市: [
          '东城区',
          '西城区',
          '崇文区',
          '宣武区',
          '朝阳区',
          '丰台区',
          '石景山区',
          '海淀区',
          '门头沟区',
          '房山区',
          '通州区',
          '顺义区',
          '昌平区',
          '大兴区',
          '怀柔区',
          '平谷区',
          '密云县',
          '延庆县'
        ]
      },
      天津市: {
        天津市: [
          '和平区',
          '河东区',
          '河西区',
          '南开区',
          '河北区',
          '红桥区',
          '塘沽区',
          '汉沽区',
          '大港区',
          '东丽区',
          '西青区',
          '津南区',
          '北辰区',
          '武清区',
          '宝坻区',
          '宁河县',
          '静海县',
          '蓟县'
        ]
      },
      河北省: {
        石家庄市: [
          '长安区',
          '桥东区',
          '桥西区',
          '新华区',
          '井陉矿区',
          '裕华区',
          '井陉县',
          '正定县',
          '栾城县',
          '行唐县',
          '灵寿县',
          '高邑县',
          '深泽县',
          '赞皇县',
          '无极县',
          '平山县',
          '元氏县',
          '赵县',
          '辛集市',
          '藁城市',
          '晋州市',
          '新乐市',
          '鹿泉市'
        ],
        唐山市: [
          '路南区',
          '路北区',
          '古冶区',
          '开平区',
          '丰南区',
          '丰润区',
          '滦县',
          '滦南县',
          '乐亭县',
          '迁西县',
          '玉田县',
          '唐海县',
          '遵化市',
          '迁安市'
        ],
        秦皇岛市: [
          '海港区',
          '山海关区',
          '北戴河区',
          '青龙满族自治县',
          '昌黎县',
          '抚宁县',
          '卢龙县'
        ]
      },
      山西省: {
        太原市: [
          '小店区',
          '迎泽区',
          '杏花岭区',
          '尖草坪区',
          '万柏林区',
          '晋源区',
          '清徐县',
          '阳曲县',
          '娄烦县',
          '古交市'
        ],
        大同市: [
          '城区',
          '矿区',
          '南郊区',
          '新荣区',
          '阳高县',
          '天镇县',
          '广灵县',
          '灵丘县',
          '浑源县',
          '左云县',
          '大同县'
        ],
        阳泉市: ['城区', '矿区', '郊区', '平定县', '盂县']
      }
    }
  }
};

3. 在pages文件夹下新建一个Index.vue文件，在里面调用CityPicker组件：

<template>
  <div class="container">
    <van-field
      v-model="value"
      label="城市"
      placeholder="请选择城市"
      readonly
      @click="showPicker"
    />
    <city-picker
      :visible.sync="show"
      :value.sync="value"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import CityPicker from '@/components/CityPicker/CityPicker';
export default {
  components: {
    CityPicker
  },
  data() {
    return {
      show: false,
      value: [null, null, null]
    };
  },
  methods: {
    showPicker() {
      this.show = true;
    },
    onConfirm(value) {
      this.value = value;
      this.show = false;
    },
    onCancel() {
      this.show = false;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

这样一个封装好的城市选择器组件就完成了。可以根据自己的需要进行样式和功能的调整。