移動端使用類似 picker組件時，input聚焦不觸發鍵盤的操作

場景

• 移動端使用picker組件，示例中用的時 mint-ui 的picker ,但本文的操作與mint-ui的picker 沒有太多關係

示例代碼

 <input v-model="editBasicData.BirthDay" :disabled="status == 1" placeholder="請選擇出生年月" @focus="birthDayVisisble = true"  />

說明： 這是一個簡單的選擇日期的框，要實現的功能時 可以選擇出生日期，我們看效果圖

實際上在手機端的話 ，底部還會彈出鍵盤的。這裏就不妨手機的圖了

解決方法嘗試1 （網上找的解決方案）

stopKeyborad () {
  this.$refs.scanTextbox.setAttribute('readonly', 'readonly');
  setTimeout(() => {
    this.$refs.scanTextbox.removeAttribute('readonly');
  }, 200);
}

改進

其實不用vue 的refs 也可以 ，直接 @focus=“stopKeyborad” 然後 this.$refs.scanTextbox 替換成 e.srcElement

 stopKeyboard(e){
        e.srcElement.setAttribute('readonly', 'readonly')
        setTimeout(() => {
          e.srcElement.removeAttribute('readonly')
        }, 200)
      },

繼續改進

因爲 原來的@focus 已經寫好了 業務方法，並且有多個picker , 這樣 就不能在@focus上面該了 所以加了一個 @click
代碼爲

        <input v-model="editBasicData.BirthDay" :disabled="status == 1" placeholder="請選擇出生年月" @focus="birthDayVisisble = true" @click="stopKeyboard" />

這樣在pc端調試好了，突然發現手機端會彈出鍵盤，只需要加個@click 就好了