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

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
你可以封装一个 `SearchInput` 组件来实现这个功能。这个组件可以接受 `value` 和 `placeholder` 两个 props,分别表示搜索框的值和占位符。在组件的模板中,你可以使用 `el-input` 和 `el-button` 组件来实现搜索框的样式。具体代码如下: ``` html <template> <div class="search-input"> <el-input v-model="searchValue" :placeholder="placeholder" prefix-icon="el-icon-search" @keyup.enter.native="search"/> <el-button type="primary" icon="el-icon-search" @click="search"></el-button> </div> </template> <script> export default { name: 'SearchInput', props: { value: { type: String, default: '' }, placeholder: { type: String, default: '请输入搜索内容' } }, data () { return { searchValue: this.value } }, methods: { search () { this.$emit('search', this.searchValue) } }, watch: { value (val) { this.searchValue = val } } } </script> <style scoped> .search-input { display: flex; align-items: center; } </style> ``` 在父组件中,你可以使用 `SearchInput` 组件来代替原来的 `el-input` 组件,同时监听 `search` 事件来处理搜索的逻辑。例如: ``` html <template> <div class="search-wrapper"> <SearchInput v-model="searchValue" @search="handleSearch"/> </div> </template> <script> import SearchInput from '@/components/SearchInput' export default { name: 'SearchPage', components: { SearchInput }, data () { return { searchValue: '' } }, methods: { handleSearch (value) { console.log(`搜索 ${value}`) // 处理搜索逻辑 } } } </script> <style> .search-wrapper { margin: 20px; } </style> ``` 这样,你就可以在 Vue2 项目中封装一个带有搜索图标和搜索按钮的搜索框组件了。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

镜中先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值