uniapp中使用vantweapp实现省市区三级联动选择

àì夳堔傛蜴生んèń 2022-12-01 03:42 311阅读 0赞

## 先看代码，复制使用即可，本文介绍了如何在uniapp中使用vant组件实现省市区三级联动选择。 ##

在复制使用之前您要先配置使用以下两个vantweapp组件

"van-action-sheet": "路径/dist/action-sheet/index",
    "van-area": "路径/dist/area/index",

然后在下载本人提供的资源`ThisIsarea.js`。  
[省市三级联动文件][Link 1]（如果您未找到本人提供的ThisIsarea.js资源，您可以去以下地址下载 [https://github.com/youzan/vant/blob/dev/src/area/demo/area.js][https_github.com_youzan_vant_blob_dev_src_area_demo_area.js].）将此文件放在您当前这个.vue文件的同级目录之下，然后复制代码，您将看到以下信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]

<template>
    	<view class="Mir">
    		
    		<van-action-sheet :show="isCityshow" @close="onClose" title="地区选择">
    			<view><van-area :area-list="areaList" @confirm="onConfirm" /></view>
    		</van-action-sheet>
    		<view class="IsCityMsg" @click="isCityshow=true">
    			<text>{ { city ? city : '点击选择地区'}}</text>
    		</view>
    	</view>
    </template>
    
    <script>
    import area from './ThisIsarea.js';
    export default { 
    	data() { 
    		return { 
    			isCityshow:false,
    			areaList:[],
    			city:''
    		};
    	}, 
    	onLoad() { 
    		this.areaList = area;
    	},
    	methods: { 
    		//关闭市区
    		onClose() { 
    			this.isCityshow = false;
    		},
    		onConfirm(e) { 
    			const _this = this;
    			this.isCityshow = false;
    			this.city = e.detail.values[0].name+ '/' + e.detail.values[1].name+'/' +e.detail.values[2].name ;
    			this.MerchantList = []
    			this.MerchantListSon =[]
    		},
    	},
    
    };
    </script>
    
    <style lang="scss" scoped>
    	.Mir{ 
    		line-height:100px;
    		text-align:center;
    		.IsCityMsg{ 
    			cursor: pointer;
    		}
    	}
    </style>

其他有关uniapp的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。

[Link 1]: https://download.csdn.net/download/weixin_47821281/12747070
[https_github.com_youzan_vant_blob_dev_src_area_demo_area.js]: https://github.com/youzan/vant/blob/dev/src/area/demo/area.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/fd7d9c2ea8d3492f896a614ef17a0c8a.png