好的，以下是基于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>
```
这样一个封装好的
城市选择器组件就完成了。可以根据自己的需要进行样式和功能的调整。
6634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
