1. 程式人生 > 實用技巧 >element-ui select可搜尋下拉框無法在IOS或Ipad調起小鍵盤輸入法

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') } } })