element-ui select可搜索下拉框無法在IOS或Ipad調起小鍵盤輸入法

參考：https://segmentfault.com/q/1010000021748033

原因：常規select是可以調起小鍵盤的。但是element-ui的select其實是input。並且這個input里面有個readonly屬性，這個屬性導致無法調起ios小鍵盤。在安卓上是沒問題的

我們可以查看源碼

 

 

 

 

 

 

經網絡各路大神的指引，我們可以在每次獲取焦點和失去焦點的時候把readonly干掉。目前發現這個方法是可行的

 

 

 

操作：

<el-select
      v-if="showAgents"
      ref="agentSelect" // 1.定義ref
      v-model="agents"
      :multiple="showAgentsMultiple"
      clearable
      filterable
      placeholder="選擇"
      @hook:mounted="cancalReadOnly" // 2.定義事件
      @visible-change="cancalReadOnly"   // 3.定義事件
    >
      <el-option v-for="item in agentsOptions" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>

　　

methods方法體里面定義方法

cancalReadOnly(onOff) {
      this.$nextTick(() => {
        if (!onOff) {
          const Selects = this.$refs
          console.log(Selects)
　　　　　　// 如果只有1個下拉框，這段就足夠了---start
          if (Selects.agentSelect) {
            const input = Selects.agentSelect.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }
　　　　　　// 如果只有1個下拉框，這段就足夠了---end
　　　　　　// 如果有多個，就加多幾個，代碼可以優化，我懶了
          if (Selects.agent2Select) {
            const appinput = Selects.appSelect.$el.querySelector('.el-input__inner')
            appinput.removeAttribute('readonly')
          }
          if (Selects.agent3Select) {
            const gameinput = Selects.gameSelect.$el.querySelector('.el-input__inner')
            gameinput.removeAttribute('readonly')
          }
        }
      })