openks / learn-vue

自定义组件文档
https://openks.github.io/learn-vue
0 stars 0 forks source link

mint-ui:mt-field使用picker会调起输入法键盘问题 #6

Open openks opened 7 years ago

openks commented 7 years ago

点击姓名picker会掉起键盘输入法

    <mt-field label="姓别" v-model="gander" @click.native="popSlot=true" placeholder="请选择"  :disableClear="true">
      <i class="mint-cell-allow-right"></i>
    </mt-field>

    <mt-popup v-model="popSlot" position="bottom" class="mint-popup">
     <mt-picker ref="popSlot" :slots="popSlots"  :visible-item-count="3" :showToolbar="showToolbar" >
       <span class="mint-datetime-action mint-datetime-cancel" @click="popSlot = false;$emit('cancel')">取消</span>
       <span class="mint-datetime-action mint-datetime-confirm" @click="popSlotConfirm('popSlot')">确定</span>
     </mt-picker>
   </mt-popup>
export default {
  data() {
    return {
      gander: '',
      popSlot: false,
      showToolbar: true,
      popSlots: [{
        flex: 1,
        defaultIndex: 0,
        values: ['请选择', '男', '女'],
        className: 'slot1',
      }],
    };
  },
  methods: {
    popSlotConfirm(item) {
      /* eslint-disable */
      this.$data[item] = false;
      this.gander = this.$refs[item].values[0];
    },
  },
};
openks commented 7 years ago
      <mt-field label="姓别" v-model="gander" @click.native="popSlot=true" placeholder="请选择" :readonly="true" :disableClear="true">
      <i class="mint-cell-allow-right"></i>
    </mt-field>

设置只读即可,手机输入法键盘就不会被掉起