Files
xiaokuaisong-paotui/distribution/uni_modules/mo-city-group
2025-08-18 09:57:10 +08:00
..
2025-08-18 09:57:10 +08:00
2025-08-18 09:57:10 +08:00
2025-08-18 09:57:10 +08:00
2025-08-18 09:57:10 +08:00

city 地址联动

组件名mo-city-group 代码块: mo-city-group

省市县区街道地区四级联动 理论上支持所有平台,可自行尝试

[使用文档]


属性

|diyStyle							|{}	                    |外层自定义样式													|
|province							|String	 		        |默认省份全称													|
|city							    |String	 		        |默认城市全称													|
|area							    |String	 		        |默认县区全称													|
|street							    |String	 		        |默认街道全称													|
|keyName							|String	= [name]        |要显示的对象字段名											    |
|isProvince				            |Boolean|true			|是否显示省份										|
|isCity				                |Boolean|true			|是否显示城市										|
|isArea				                |Boolean|true			|是否显示县区										|
|isStreet				            |Boolean|true			|是否显示街道										|
|isShowTip				            |Boolean|true			|是否显示选择省市县街道的选项										|
|provinceTitle				        |String	= [全部省份]		|不选择省份时的文字或显示选择省市县街道选项的提示文字isShowTip=true时有效
|cityTitle				            |String	= [全部城市]		|不选择城市时的文字或显示选择省市县街道选项的提示文字isShowTip=true时有效
|areaTitle				            |String	= [全部县区]		|不选择县区时的文字或显示选择省市县街道选项的提示文字isShowTip=true时有效
|streetTitle				        |String	= [全部街道]		|不选择街道时的文字或显示选择省市县街道选项的提示文字isShowTip=true时有效|

事件
|provinceChange				        |Event|{code:0,name:'名称'}			|省份选择事件										|
|cityChange				            |Event|{code:0,name:'名称'}			|城市选择事件										|
|areaChange				            |Event|{code:0,name:'名称'}			|县区选择事件										|
|streetChange				        |Event|{code:0,name:'名称'}			|街道选择事件										|

[使用示例]


###注意事项
由于四级联动JS数据文件过大小程序须在分包使用加载本组件否则无法上传体验版主包使用时建议跳转到分包页面加载选择地址后再返回给主包调用

分包策略如下
1把uni_modules\mo-city-group目录下的components目录整体移到你的分包目录多个分包要遵循ABCD...能依次访问并加载的策略或将本自定义组件放于每个分包中;
2pages.json文件中配置自动加载如本组件的分包路径是pagesA/components/...
   则pages.json配置
	"easycom": {
		"autoscan": true,
		"custom": {
			"^mo-(.*)": "@/pagesA/components/mo-$1/mo-$1.vue"  //此为本组件的自动加载路径
		}
	}
3这时只需在分包模板文件中使用组件无需导入组件可自动加载分包中的本组件

    <template>
    <view>
	<mo-city-group class="color-whites any-font-size-12"  dataUrl="http://127.0.0.1/comjs/city.js" 
						:isProvince="true" :isCity="true" province="浙江省" city="台州市" 
						@area-change="citygroupChangeSo($event,'area')" 
						@street-change="citygroupChangeSo($event,'street')"
						@province-change="citygroupChangeSo($event,'province')"
						@city-change="citygroupChangeSo($event,'city')"></mo-city-group>
	</view>
	</template>
	<script>
	export default{
		methods:{
			citygroupChangeSo(event,type){
				console.log(event,type)
			}
		}
	}
	</script>
	
4分包配置完后记得删除uni_modules目录下的mo-city-group目录避免小程序无法上传体验版本

如使用过程中有任何问题或者您对此组件有一些好的建议欢迎联系微信actioniing