效果图如下:
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>