vue mint-ui省市区选择器

首先引入mint-ui组件库具体步骤可以查看查看组件库

我们这里用到Popup和picker这两个组件

建立一个addressPopupTool.vue

<template>

  <div class="content">
  	<mt-popup v-model="regionVisible" position="bottom" class="region-popup">
	    <mt-picker :slots="myAddressSlots" showToolbar valueKey="name" :itemHeight='60' @change="addressChange">
	    	<div class="top-btn flex-bet">
		  		<div class="cancel" @click.stop="cancel">取消</div>
		  		<div class="determine" @click.stop="determine">确定</div>
				</div>
	    </mt-picker>
    </mt-popup>
  </div>

</template>

<script>
	import { Picker } from 'mint-ui';
  //引入省/市/区数据json文件
  import { zmGetProvincesArr,zmGetCitiesArr,zmGetAreaArr } from '@/model/zmRegion'

  export default {
    name: "addressPopupTool",
    props:['flag'],
    data() {
      return {
      	regionVisible: false,
        region: '',//显示三级地址
        province: '',//省
        city: '',//市
        area: '',//县
        provinceCode: '',//省级代码
        cityCode: '', //市级代码
        areaCode: '',//县级代码
        regionInit: false,//禁止地区选择器自动初始化，picker组件会默认进行初始化，导致一进入页面就会默认选中一个初始3级地址
        myAddressSlots: [//省
          {
            flex: 1,
            values: zmGetProvincesArr(), //省份数组
            className: 'slot1',
            textAlign: 'center'
          },
          //分隔符
          {
            divider: true,
            content: '——',
            className: 'slot2'
          },
          //市
          {
            flex: 1,
            values: zmGetCitiesArr('11'),
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '——',
            className: 'slot4'
          },
          //县
          {
            flex: 1,
            values: zmGetAreaArr('1101'),
            className: 'slot5',
            textAlign: 'center'
          }
        ],
      }
    },
    mounted: function() {
    	
    },

    methods: {
    	
      addressChange(picker, values) {
        if (this.regionInit) {
          //取值并赋值
          if (values[0] && values[1]  && values[2]) {
            this.region = values[0]["name"] +'-'+ values[1]["name"] +'-'+ values[2]["name"];
            this.province = values[0]["name"];
            this.city = values[1]["name"];
            this.county = values[2]["name"];
            this.provinceCode = values[0]["code"].toString().padEnd(6,'0');
            this.cityCode = values[1]["code"].toString().padEnd(6,'0');
            this.countyCode = values[2]["code"].toString().padEnd(6,'0');
               //console.log("省:")
               //console.table(picker.getSlotValues(0));
               //console.log("省/市/区:")
               //console.table(picker.getValues());
            //给市、县赋值
            picker.setSlotValues(1, zmGetCitiesArr(values[0]["code"]));
            picker.setSlotValues(2, zmGetAreaArr(values[1]["code"]));
          }else {
            console.log("数据不全");
          }
        } else {
          this.regionInit = true;
        }
      },
    	//点击确定
      determine: function() {
      	this.regionVisible = !this.regionVisible;
      	this.$emit("determine", this.regionVisible,this.region,this.provinceCode,this.cityCode,this.countyCode)
      },
      //点击取消
      cancel: function() {
      	this.regionVisible = !this.regionVisible;
      	this.$emit("cancel", this.regionVisible)
      },
      popup: function(e) {
      	this.regionVisible = !this.flag
      }
      

    },
  }


</script>

<style scoped>

  .content {width: 375px;height: 280px;}
 	.top-btn{padding: 10px;font-size: 15px;}
 	.top-btn>div{width: 80px;height: 30px;line-height: 30px;text-align: center;}
 	.picker{width: 375px;}

</style>

使用组件

<div class="rg-box-add" @click="showAddressPicker">
	<div>{{pca}}</div>
	<div class="choice-add">
			<v-addr ref='getFlag' :flag="regionVisible" @cancel="cancel" @determine="determine(arguments)"></v-addr>
	</div>
</div>
<script>
	import vAddr from '@/components/addressPopupTool.vue';
	export default{
		components: {
	      vAddr: vAddr
	    },
		data() {
			return{
				regionVisible: false, //控制省市区选择器的显示隐藏
				pca: '请选择-请选择-请选择',
				provinceCode: '',//省级代码
		        cityCode: '', //市级代码
		        areaCode: '',//县级代码
			}
		},
		methods:{
			//打开地址选择器
			    showAddressPicker(){
			    	this.regionVisible = !this.regionVisible
			        this.$refs.getFlag.popup()  //向子组件传参
			    },
			    //点击确定
			    determine(e) {
			    	this.regionVisible = e[0]
			    	this.pca = e[1]?e[1]:'北京市-市辖区-东城区'
			    	this.provinceCode = e[2]?e[2]:"110000";
			    	this.cityCode = e[3]?e[3]:"110100";
			    	this.areaCode = e[4]?e[4]:"110101";
			    },
			    //点击取消
			    cancel(e) {
			    	this.regionVisible = e
			    },
		}
	}
</script>