vue 引用省市区三级联动（插件）

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>