vue mint-ui省市区选择器

叁歲伎倆 2023-06-26 11:00 8阅读 0赞

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

我们这里用到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>

[Link 1]: http://mint-ui.github.io/#!/zh-cn