封装的input_slect组件.涉及到mint-picker的用法

直接上代码

先上效果

组件代码

<template>
  <div class="outer">
    <div class="list_input_select">
      <span class="star" v-if="showStar">*</span>
      <span class="name">{{name}}</span>
      <input class="select" type="text" @click="choose" v-model="currentValue" :placeholder="setDefaultHolder" readonly="readonly" />
      <mt-popup v-model="popupVisible" position="bottom">
        <mt-picker :slots="currentSlots" @change="onValuesChange" :showToolbar="true" ref="picker" :valueKey="valueKey">
          <div class="picker-toolbar">
            <span class="mint-datetime-action mint-datetime-cancel" @click="cancel">取消</span>
            <span class="mint-datetime-action mint-datetime-confirm" @click="sure">确定</span>
          </div>
        </mt-picker>
      </mt-popup>
      <i class="el-icon-arrow-right icon_arrow"></i>
    </div>
    <slot name="bottomTxt">

    </slot>
  </div>
</template>

<script>
  export default({
    data() {
      return {
        popupVisible: false,
        currentValue: '',
        currentSlots: this.slots
      }
    },
    props: [
      'name',
      'slots',
      'placeholder',
      'showStar',
      'valueKey',
      'afterMounted',
      'value',
      'disabled'
    ],
    computed: {
      setDefaultHolder() {
        if(this.placeholder) {
          return this.placeholder
        }
      },
      getCurrentValue (){
        return this.value;
      }
    },
    watch: {
      currentValue(newV, oldV){
        this.$emit("update:value", newV);
      },
      value(){
        this.currentValue = this.value;
      },
      slots: {
        handler(newSlots, oldSlots) {
          this.currentSlots= newSlots
        },
        deep: true
      }
    },
    created() {
      this.currentValue = this.value;
    },
    mounted(){
      let picker = this.$refs.picker;
      this.$nextTick(()=> {
        let slots = this.slots,
          valueKey = this.valueKey;
        for(let i=0; i< this.slots.length; i++){
          let slot = slots[i],
            values = slot.values,
            defaultIndex = slot.defaultIndex || slot.valueIndex;
          if(!values){
            return
          }
          for(let item of values){
            if(typeof item === 'string'){
              if(item === values[defaultIndex]){
                // slot['defaultIndex'] = defaultIndex*1;
                // slot['valueIndex'] = defaultIndex*1;
                // slot['value'] = item;
                picker.setSlotValue(i, item);
                break;
              }
            } else if(typeof item ==='object'){
              if(item[valueKey] === values[defaultIndex][valueKey]){
                // slot['defaultIndex'] = defaultIndex*1;
                // slot['valueIndex'] = defaultIndex*1;
                // slot['value'] = item;
                picker.setSlotValue(i, item);
                break;
              }
            }
          }
          this.slots = slots;
        }
      })
    },
    // updated() {
    //   let index = this.slots[0].defaultIndex;
    //   if(index || index === 0){
    //     this.currentValue =  this.slots[0].values[index].center;
    //   }
    // },
    methods: {
      choose() {
        if(!this.disabled){
          this.popupVisible = true
        }
      },
      onValuesChange(picker, values) {
        this.$emit('changedValue', values)
      },
      sure() {
        let slot = null
        this.popupVisible = false;
        // log(this.$refs.picker.getValues())
        slot = this.$refs.picker.getValues()[0];
        if(!slot){
          return
        }
        if(this.valueKey){
          this.currentValue = slot[this.valueKey]
        }else {
          this.currentValue = slot
        }
        this.$emit('sure', slot)
      },
      cancel() {
        this.popupVisible = false;

        let currentValue = this.currentValue,
          values = this.slots[0].values;
        for(let i in values){
          if(this.valueKey){
            if(values[i][this.valueKey] === currentValue){
              this.$refs.picker.setSlotValue(0, values[i]);
              break;
            }
          }else {
            if(values[i] == currentValue){
              this.$refs.picker.setSlotValue(0, values[i]);
            }
          }
        }
      }
    }
  })
</script>
<style lang="less">
  .list_input_select{
    .picker-items{width: 100%;}
  }
  .list_input_select{
    .picker-slot{
      width: 100%;
    }
  }
</style>
<style lang="less" scoped="scoped">
  .outer{
    border-bottom: 1px solid #e5e5e5;/*no*/
  }
  .list_input_select {
    width: 100%;
    padding: 0 34px;
    box-sizing: border-box;
    background: #ffffff;

    display: flex;
    flex: 1;
    min-height: 99px;
    align-items: center;
    .star {
      color: #ff0a0a;
      flex-basis: 12px;
    }
    .name {
      color: #999999;
      font-size: 28px;/* px */

      flex-basis: 172px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .select {
      height: 80px;
      border: none;
      font-size: 28px;/* px */
      color: #333333;
      appearance: none;
      background: #fff;
      outline: none;
      flex:1;
    }
    .mint-popup-bottom {
      width: 100%;
    }
    .picker-toolbar{border-bottom: solid 1px #eaeaea;}
    .icon_arrow {
      flex-basis: 24px;
      flex:0;
      color: #b3b3b3;
    }
  }
</style>

父组件中使用

    <-- <input_select ref="select" :showStar="true" :slots="frequencySlot" :name="'填写频次'" :valueKey="'name'" @sure="sure" :value.sync="frequencyValue" :placeholder="'请选择填写频次'"></input_select> -->
      <input_select ref="select" :showStar="true" :slots="frequencySlot" :name="'填写频次'" :valueKey="'name'" @sure="sure" :value.sync="frequencyValue.name" :placeholder="'请选择填写频次'"></input_select>

    data(){
        return {
            frequencyValue: {},
            frequencySlot: [{
              defaultIndex: null,
              value: null,
              values: []
            }]
        }
    },
    created(){
        this.getSlots();
    },
    methods: {
        getSlots(){
            setTimeout(()=> {
              // let values = ['yi', 'er', 'san', 'si'];
              // let index = 2;
              let values = [{value: 'S01' ,name:'yi'},
                {value: 'S02' ,name:'er'},
                {value: 'S03' ,name:'san'},
                {value: 'S04' ,name:'si'}];
              let index =1; // 设置默认值
              this.frequencySlot[0].values = values;
              this.frequencySlot[0].defaultIndex = index;
              this.frequencyValue = values[index] // object/string
            },2000)
        },
        sure(objOrStr){
            this.frequencyValue = objOrStr;
        }
    }