效果图如下:
在这里插入图片描述

1.下载三级地址联动组件到项目中https://ext.dcloud.net.cn/plugin?id=1084

2.在需要使用的页面引入以下代码:

<template>
	<view class="container">
		<view class="content">
				<button class="btns" type="primary" @tap="openAddres">默认打开地址</button>

				<button class="btns" type="default" @tap="openAddres2">自定义:根据省市区名称打开地址</button>

				<button class="btns" type="warn" @tap="openAddres3">自定义:根据省市区“code”打开地址</button>
				<textarea v-model="pickerText" cols="30" rows="10"></textarea>
				
				 <!-- mask-bg-color="rgba(0, 229, 238, 0.4)" // 自定义遮罩层背景颜色 -->
				
				<simple-address  mask-bg-color="rgba(0, 0, 0, 0.4)" ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="purple"></simple-address>
		  </view>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
	    data() {
	        return {
	            cityPickerValueDefault: [0, 0, 1],
	            pickerText: ''
	        };
	    },
	    components: {
	        simpleAddress
	    },
	    methods: {
	        openAddres() {
	            this.cityPickerValueDefault = [0,0,1]
	            this.$refs.simpleAddress.open();
	        },
	        openAddres2() {
	            // 根据 label 获取
	            var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
	            console.log(index);
	            this.cityPickerValueDefault = index.index;
	            this.$refs.simpleAddress.open();
	        },
	        openAddres3() {
	            // 根据value 获取
	            var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
	            console.log(index);
	            this.cityPickerValueDefault = index.index;
	            this.$refs.simpleAddress.open();
	        },
	        onConfirm(e) {
	            // this.pickerText = JSON.stringify(e); //这个步骤只是为了让大家看到返回的数据
	            this.pickerText = e.label;   //获取具体的值
	        }
	    }
	};
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐