vue3.0 el-autocomplete

Vue 3.0 是一款流行的 JavaScript 框架，而 el-autocomplete 则是一款基于 Vue.js 的自动完成组件，用于输入框的自动补全功能。下面是使用 Vue 3.0 和 el-autocomplete 实现自动补全功能的简单示例：

首先，你需要在项目中安装 el-autocomplete 组件：

npm install element-ui el-autocomplete -S

然后，在你的 Vue 组件中引入 el-autocomplete 组件，并在模板中使用：

<template>
  <div>
    <el-autocomplete
      v-model="inputValue"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
  </div>
</template>

<script>
import { ref } from 'vue';
import { fetchSearchResult } from '@/api';

export default {
  name: 'MyComponent',
  setup() {
    const inputValue = ref('');
    const querySearchAsync = async (queryString, callback) => {
      const res = await fetchSearchResult(queryString);
      if (res.code === 200) {
        callback(res.data);
      }
    };
    const handleSelect = (item) => {
      console.log(item);
    };
    return {
      inputValue,
      querySearchAsync,
      handleSelect,
    };
  },
};
</script>

上面的代码中，我们使用了 Vue 3.0 的 Composition API，通过 `ref` 创建了一个响应式变量 `inputValue`，用于存储输入框的值。`querySearchAsync` 函数用于异步获取搜索结果，该函数会在用户每次输入时被调用。`handleSelect` 函数会在用户选择某个搜索结果时被调用。

这里的 `fetchSearchResult` 函数是一个异步函数，用于从后端获取搜索结果。你需要根据你的项目实际情况来实现该函数。

至此，我们已经完成了使用 Vue 3.0 和 el-autocomplete 实现自动补全功能的示例。