vue 用省市區三級聯動之傻瓜式教程（復制粘貼即用）
npm 下載
npm install v-distpicker --save
main.js
//引入 省市區三級聯動
import Distpicker from 'v-distpicker'
//全局使用省市區三級聯動
Vue.component('v-distpicker', Distpicker)
vue 代碼
<template>
<div>
<div class="administrative">
行政區：
<v-distpicker style="margin-top:-24px;margin-left:80px;" province="areaData[0].province" city="province[1].city" area="province[2].area" @selected="onSelected"></v-distpicker>
</div>
</div>
</template>
<script>
// import AreaJson from "../../address.js"
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
name:'near',
data(){
return{
//省市區三級聯動
areaData : [
{
value : 0,
province : '',
},
{
value : 1,
city : '',
},
{
value : 2,
county : '',
}
],
}
},
methods:{
// 獲取到省市區三級聯動的值
onSelected(data) {
this.areaData[0].province = data.province.value
this.areaData[1].city = data.city.value
this.areaData[2].county = data.area.value
},
},
}
</script>
<style>
.administrative{
margin-left: 20px;
}
</style>