mint-ui Picker的使用

<template>
  <div v-bind:style="{minHeight:clientHeight + 'px'}" id="recive-min-body">
    <mt-header title="我的赞">
      <mt-button icon="back" slot="left" @click.native="goBack">返回</mt-button>
    </mt-header>
    <form>
      <h3 class="recive-min-input">请填写以下信息：</h3> 
      <mt-field label="你要点赞给" placeholder="巩一杰"  @click.native="handleClick"></mt-field>
      <!-- <mt-field label="使用数量" placeholder="1张"></mt-field> -->
      <mt-popup
      v-model="popupVisible"
      position="bottom"
      modal=false>
      <mt-picker v-bind:style="{width:clientWidth + 'px',padding: 20 + 'px'}" :slots="slots" @change="onValuesChange"></mt-picker>
      </mt-popup>
      <mt-field label="点赞理由" placeholder="点赞理由要规范" type="textarea" rows="4"></mt-field>
      <div class="recive-buttonBox">
            <mt-button type="primary" class="recive-button"  @click.native="reciveTestSubmit">确定</mt-button>
      </div>
    </form>
  </div>
</template>
<style scoped>
  #recive-min-body {
    background-color: #f5f5f5;
  }
  .picker-item {
    padding: 30px;
  }
  .recive-min-input {
    margin-top: 10px;
  }
  form h3 {
    margin: 0;
    padding: 10px !important;
    font-weight: normal;
    font-size: 15px;
  }
  .recive-buttonBox {
        margin: 0 20px;
    }
  .recive-button {
        width: 100%;
        border-radius: 7px;
        margin-top: 20px;
    }
</style>
<script>
export default {
  data () {
    return {
      clientWidth: document.documentElement.clientWidth,
      clientHeight: document.documentElement.clientHeight,
      popupVisible:false,
      slots:  
          [  
          {  
            flex: 1,  
            values: ['大一', '大二', '大三'],  
            className: 'slot1',  
            textAlign: 'left'  
          }, {  
            divider: true,  
            content: '-',  
            className: 'slot2'  
          }, {  
            flex: 1,  
            values: ['1', '2', '3'],  
            className: 'slot3',  
            textAlign: 'right'  
          }  
        ], 
      ids: ""
    }
  },
  watch: {
    values:function(val,oldval){
         console.log(val,oldval);
    }
  },
  methods:{
    goBack: function() {
      this.$router.push({ path: '/home/mine' });
    },
    handleClick: function() {
      this.popupVisible = true;
    },
    onValuesChange(picker, values) {
      if (values[0]=='大一') {
        picker.setSlotValues(1, ['1','2','3']);
      }else if (values[0]=='大二') {
        picker.setSlotValues(1, ['a','b','c']);
      }else if (values[0]=='大三') {
        picker.setSlotValues(1, ['4','5','6']);
      };
    }
  },
  mounted(){
    // this.ids = filters.ytox(this.$route.params.ids)
  }
}
</script>

　　

效果图：