在 iOS 移动端上,第一次输入文字内容时,无法触发 Element UI 下拉框的模糊查询功能

在 iOS 移动端上,第一次输入文字内容时,无法触发 Element UI 下拉框的模糊查询功能,求解决

这可能是 iOS 移动端的软键盘输入问题,可以尝试以下解决方法:

  1. 修改 Element UI 下拉框的输入框类型为 "search",即添加属性 "type='search'"。
  2. 在输入框的 "input" 事件中手动触发下拉框的模糊查询,例如:
    <el-autocomplete
    v-model="value"
    :fetch-suggestions="querySearch"
    @input="handleInput"
    ></el-autocomplete>
    <script>
    export default {
    data() {
     return {
       value: '',
     }
    },
    methods: {
     querySearch(queryString, callback) {
       // 模糊查询的逻辑
     },
     handleInput(event) {
       if (!event.target.value) {
         // 输入框为空时手动触发下拉框的模糊查询
         this.$refs.autocomplete.handleQueryChange('')
       }
     },
    },
    }
    </script>
    
  3. 使用 FastClick 插件,解决 iOS 移动端的点击延迟问题,例如:
    npm install fastclick --save
    import FastClick from 'fastclick'
    FastClick.attach(document.body)