vue移动端模糊查询首次输入不生效全局解决办法

如果你在 Vue 移动端项目中需要频繁使用模糊查询，而且首次输入不生效的问题比较普遍，可以考虑在全局中进行处理，以便复用和统一管理。

具体实现可以在 Vue 的 `main.js` 中全局注册一个自定义指令，用于监听输入框的 `input` 事件，并使用延时器进行模糊匹配。代码如下：

import Vue from 'vue';

Vue.directive('debounce', {
  inserted: function(el, binding) {
    let timer;
    el.addEventListener('input', function() {
      clearTimeout(timer);
      timer = setTimeout(() => {
        el.dispatchEvent(new Event('change'));
      }, binding.value || 300);
    });
  }
});

在上面的代码中，我们定义了一个名为 `debounce` 的自定义指令，用于监听输入框的 `input` 事件，并使用延时器进行模糊匹配。

使用方法如下：

<template>
  <div>
    <input type="text" v-model="keyword" v-debounce="500">
    <ul>
      <li v-for="(item, index) in filteredList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: ['apple', 'banana', 'orange', 'pear']
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.indexOf(this.keyword) !== -1);
    }
  }
};
</script>

在上面的代码中，我们在输入框上使用了 `v-debounce` 指令，并设置了延时时间为 500ms，这样就可以在全局中统一处理移动端模糊查询首次输入不生效的问题。

希望这个方法能够帮助你解决问题。