3、关于地区选择：Area 省市区选择

<template>
    <div>
        <nav-bar :if_left_arrow="true" title="省市区选择"></nav-bar>
        
        <div  @click="city_show = true">
        	<label for="">地址选择</label>
            <input type="text" placeholder="请选择地址" v-model="address" readonly onfocus="this.blur();">
        </div>
        
        <!--可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择-->
		<van-area 
			:area-list="areaList"
			:columns-placeholder="['请选择', '请选择', '请选择']"
  			title="选择城市"
  			:columns-num="3"
  			@cancel="cancel"
            @confirm="confirm" />
    </div>
</template>

<script>
    import areaList from '@/common/js/area.js'//本地地区数据
    export default {
        data() {
            return {
				areaList,//地区数据
				city_show :false,//地区弹出
				address:'',//选中的地区名称
				address_code:'',//选中的地区code
            }
        },
        methods: {
			//选择城市弹窗，取消
	        cancel(){
	            this.cityFlag = false;
	        },
	        //，确定，赋值到input框
	        confirm(val){
	            this.city_show = false;
	            this.address = val[0].name + "-" + val[1].name + "-" + val[2].name;
	            this.address_code = val[2].code;
	        },
        },
    }
</script>