11、Mint UI Popup和Picker结合 创建新增地址

picker按需引入

import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);

<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>

export default {
  methods: {
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    }
  },
  data() {
    return {
      slots: [
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        }
      ]
    };
  }
};

change 事件

在 change 事件中，可以使用注册到 picker 实例上的一些方法：
getSlotValue(index)：获取给定 slot 目前被选中的值
setSlotValue(index, value)：设定给定 slot 被选中的值，该值必须存在于该 slot 的备选值数组中
getSlotValues(index)：获取给定 slot 的备选值数组
setSlotValues(index, values)：设定给定 slot 的备选值数组
getValues()：获取所有 slot 目前被选中的值（分隔符 slot 除外）
setValues(values)：设定所有 slot 被选中的值（分隔符 slot 除外），该值必须存在于对应 slot 的备选值数组中

举例效果如下：

<template>
    <div class="address">
        <mt-header fixed title="新建收货地址">
            <router-link to="/mycell" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <mt-field label="收货人" placeholder="请填写收货人姓名" v-model="consignee"></mt-field>
        <mt-field label="手机号码" placeholder="请填写收货人手机号" type="tel" v-model="phone"></mt-field>
        <mt-field label="所在地址" placeholder="省市区县、乡镇等" v-model="address" @click.native="popupVisible =!popupVisible"></mt-field>
        <mt-field label="详细地址" placeholder="街道、楼牌号等" type="textarea" rows="2" v-model="detailAdd"></mt-field>
        <mt-button type="danger" size="small">保存</mt-button>
        <!-- popup和picker结合使用     -->
        <mt-popup   v-model="popupVisible" popup-transition="popup-fade" position="bottom" closeOnClickModal="true" >
            <div class="picker-toolbar-title">
                  <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
                  <div class="">请选择地址</div>
                  <div class="usi-btn-sure" @click="addrConfirm">确定</div>
             </div>
            <mt-picker  ref='picker' :slots="datalist"  @change="onValuesChange"></mt-picker>
        </mt-popup>        
    </div>
</template>

<script>
import allCity from '@/assets/js/city' //省市区联动数据
let pickerObj = {
    prov:{},
    city:{},
    area:{}
}
    export default {
        data(){
            return{
                consignee:'',
                phone:'',
                address:'',
                detailAdd:'',
                popupVisible:false,
                pickerValues:[]
            }
        },
        computed:{
            datalist(){
                let slots = [
                    {
                    flex: 1,
                    values: Object.keys(pickerObj.prov),
                    className: 'slot1',
                    textAlign: 'right'
                    }, 
                    {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                    }, 
                    {
                    flex: 1,
                    values:Object.keys(pickerObj.city),
                    className: 'slot3',
                    textAlign: 'center'
                    },
                     {
                    divider: true,
                    content: '-',
                    className: 'slot4'
                    }, 
                    {
                    flex: 1,
                    values:Object.keys(pickerObj.area),
                    className: 'slot5',
                    textAlign: 'left'
                    }
                ]
                return slots;
            }           
        },
        created(){
            let _this = this;           
            allCity.forEach(function(val,index){    
                    pickerObj.prov[val.label] = val.label;
            });
            allCity[0].children.forEach(function(item,id){
                pickerObj.city[item.label] = item.label;
            })
            allCity[0].children[0].children.forEach(function(item,id){
                pickerObj.area[item.label] = item.label;
            });
        },
        methods: {
            onValuesChange(picker, values) {
                let _this = this;
                allCity.forEach(function(val,index){
                    //values[0]是第一个省当前选择的值
                    if(val.label == values[0]){ 
                        //当前省对应的城市
                        let icity = val.children.map(function(item,index){
                            return item.label
                        })
                        picker.setSlotValues(1,icity);  //设定给定slot备选数组的值                        
                        //当前城市对应的区
                        allCity[index].children.forEach(function(item,id){    
                            if(item.label == values[1]){
                                let iregion = item.children.map(function(ele,index){
                                    return ele.label
                                });
                                picker.setSlotValues(2,iregion); //设定给定slot备选数组的值
                            } 
                        });
                    }
                });
                this.pickerValues = values;
            },
            addrConfirm(){
                this.popupVisible = false;
                this.address = this.pickerValues.join('-');
            }
        }
  };
</script>

<style scoped>
.address{
    padding-top:40px;
}
.mint-header{
    background:#fff;
    color:#666;
    font-size:16px;
}
.mint-popup{
    width:100%;
}
.picker-toolbar-title{
    display:flex;
    flex-direction:row;
    justify-content: space-around;
    height:40px;
    line-height:40px;
    font-size:16px;
    background:#f5f5f5;
}
.usi-btn-cancel,.usi-btn-sure{
    color:#ff6600;
}
</style>