uni-app实现三级地址联动(simple-address的使用)

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

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>

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃葡萄不吐葡萄皮嘻嘻

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值