IOS下el-select 远程搜索问题

移送端使用Element el-select 远程搜索组件问题

1、点击输入框,无法调起键盘
2、输入中文,无法触发搜索方法

解决方案
<template>
      <el-select ref="headerSearchSelect" filterable v-model="id" remote :remote-method="remoteMethod" placeholder="请输入名称进行选择" @focus="clear" @hook:mounted="clear" @visible-change="clear">
              <el-option v-for="item in listData" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
</template>

<script>
  mounted() {
    this.$nextTick(() => {
            // 解决IOS 输入中文,无法触发el-select remote-method方法
            const { headerSearchSelect } = this.$refs;
            const input = headerSearchSelect.$el.querySelector('.el-input__inner')
            //监听事件,查询下拉框
            input.addEventListener('compositionend', e =>{
              this.remoteMethod(e.target.value)
            });
          })
  },
  methods: {
    // 解决el-select remote 在IOS上无法调出键盘的问题
    clear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { headerSearchSelect } = this.$refs;
            const input = headerSearchSelect.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200);
        }
      });
    },
    // 远程搜索
    remoteMethod(query) {
        console.log('当前搜索内容', query)
    },
  }
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容