结合mint-ui 实现底部弹框选择

组件   

popPicker.vue

<template>
  <div>
    <mt-popup
      class="popPanel"
      position="bottom"
      v-model="currentVal"
      :closeOnClickModal="clickfalse"
    >
      <div class="pickerBtns clearBt" style="overflow: hidden;">
        <span class="float_l" @click="PopParent(0)">取消</span>
        <span class="float_r" @click="PopParent(1)">确认</span>
      </div>
      <mt-picker :slots="slots" value-key="name" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
/* eslint-disable */

export default {
  name: "popPicker",
  data() {
    return {
      slots: [],
      currentVal: true,
      clickfalse: false,
      chargePeriodArr1: this.chargePeriodArr,
      insuranceTimeArr1: this.insuranceTimeArr,
      cityarr : [],
      districtarr : [],
      payUserMap1:this.payUserMap, //支付页相关信息
      result: [
        {name:"北京市",value:'110000'},
        {name:"北京市",value:'110100'},
        {name:"东城区",value:'110101'},
    ],
    };
  },
  props:{
      popType: Number,
      chargePeriodArr:Array,
      insuranceTimeArr:Array,
      ageList:Array,
      natureList :Array,
      payUserMap:Array,
      taxpayerIdenNumberList:Array
  },
  created() {
    this.slots=[ {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center",
          // defaultIndex: 43
        }
      ]
   if (this.popType == 0) {//开户银行省
    this.slots=[ {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center"
        }
      ]
      this.slots[0].values =  this.payUserMap1;
      // this.slots[2].values =  this.CONFIG.addressList[0].children;
    }else if (this.popType == 2) {//与被保人关系
      this.slots[0].values = this.payUserMap1;
    }else if (this.popType == 1) {//市区  
    this.slots=[ {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center"
        }
      ]
      this.slots[0].values =  this.payUserMap1;
    }
  }, 
  methods: {
    onValuesChange(picker, values) {
      this.result = values[0];
    },
    PopParent(status) {
      var data = {
        flag: false,
        value: status == 0 ? this.resultCity : this.result
      };
      if(data != ''){
        this.$emit("theEvToParent", data);
      }
    }
  }
};
</script>

<style scoped>
.pickerBtns{
  padding: 0;
  margin: 0;
  height: 30px;
  line-height: 30px;
  background: #f7f7f7;
  text-align: center;
  padding: 10px;
  color: #3d99de;
  font-size: 14px;
  }
.float_l{
    float:left;
  }
.float_r{
    float:right;
  }
.clearBt{
  clear:both;
  }
.pickerBtns span {
  padding: 10px;
  color: #3d99de;
  font-size: 14px;
 }
.popPanel {
  width: 100%;
  max-width: 940px;
 }
</style>

pay.vue

 <!-- 自定义组件popPicker -->
        <popPicker
          v-if="selectFlag"
          :popType="popType"
          @theEvToParent="doChange"
          class="ntm_picker"
          v-bind:payUserMap="payUserMap"
        ></popPicker>

import popPicker from "@/utils/popPicker";
export default {
  name: "Pay2",
  components: {
    Subbar2,
    popPicker
  },
}

在js方法中，将选择的数组内容赋值给this.payUserMap

 for (var i in this.provinceList) {
          var obj = {
            name: "",
            value: ""
          };
          obj.name = this.provinceList[i].provinceName;
          obj.value = this.provinceList[i].provinceCode;
          this.provinceListM.push(obj);
        }
        console.log(this.provinceListM);

注意----要保持这种结构（name，value）